css里面设定的长宽为什么和实际不符呢？

小王正在学习中 2016-03-17 01:38:29

如图

直接设定元素宽高就是正常的，拿到css里面宽高就变小了。网上说是没有初始化，引入了初始化的css还是不对。
不知道为毛



<!DOCTYPE html>

<html>

<head>

	

	<meta charset = "utf-8">

	<title>图形特效处理</title>



             <link rel = "stylesheet" href = "init.css" type = "text/css" />

             <style type="text/css">



             #mc1 {



	width: 420 ;

	height: 320 ;

	border: 1px solid black ;

             

             }



</style> 

</head>

<body>

	

	<h6>坐标变换</h6>



	<canvas id = "mc" width = "420" height = "320" style = "border: 1px solid black"></canvas>

		<canvas id = "mc1" ></canvas>

init.css



/* css reset www.admin10000.com */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { 

           margin:0 auto; padding:0px; border:0px ; 

	/*margin:0; padding:0;*/ }

body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }

td,th,caption { font-size:14px; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }

address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}

a { color:#555; text-decoration:none; }

a:hover { text-decoration:underline; }

img { border:none; }

ol,ul,li { list-style:none; }

input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }

table { border-collapse:collapse; }

html {overflow-y: scroll;} 

/* css common */

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}

.clearfix { *zoom:1; }

...全文

980 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2016-03-17

打赏
举报

你有mc1的canvas 元素没有设置 width 和 height。画布内的像素就成了默认值(width=300像素，height=150像素) css的 width 和 height 设置的只是画布在页面上显示的大小，不会改变画布内的像素多少。

小王正在学习中 2016-03-17

打赏
举报

那么要做到结构层和显示层，分离的话，要怎么在css里面设置画布的实际大小呢？还是说要用js给canvas设置下

天际的海浪 2016-03-17

打赏
举报

canvas 元素的 width 和 height 设置的是画布内的像素多少，也就相当于图片的实际尺寸。 css的 width 和 height 设置的是画布在页面上显示的大小。

小王正在学习中 2016-03-17

打赏
举报

css里面不加px的宽高是无效的，画布是默认大小

小王正在学习中 2016-03-17

打赏
举报

加上px之后画布一样大了，但是里面的图形坐标貌似有点不正常。。。

小王正在学习中 2016-03-17

打赏
举报

js代码如下


<script type="text/javascript">

	var canvas = document.getElementById('mc') ;
	var ctx = canvas.getContext('2d') ;

	ctx.fillStyle = "rgba(255,0,0,0.3)" ;
	ctx.translate(30,200) ;
	for(var i = 0 ; i < 50 ; i ++ ) {

		ctx.translate(50,50) ;
		ctx.scale(0.93,0.93) ;
		ctx.rotate(-Math.PI / 10 ) ;
		ctx.fillRect(0,0,150,75) ;

	}

	var canvas1 = document.getElementById('mc1') ;
	var ctx1 = canvas1.getContext('2d') ;

	ctx1.fillStyle = "rgba(255,0,0,0.3)" ;
	ctx1.translate(30,200) ;
	for(var i = 0 ; i < 50 ; i ++ ) {

		ctx1.translate(50,50) ;
		ctx1.scale(0.93,0.93) ;
		ctx1.rotate(-Math.PI / 10 ) ;
		ctx1.fillRect(0,0,150,75) ;

	}