为啥通过设置canvas的style来控制其长宽，画出的图会变成2倍-JavaSript-爱易网页

为啥通过设置canvas的style来控制其长宽，画出的图会变成2倍

日期：2014-05-16　浏览次数：20463 次

为何通过设置canvas的style来控制其长宽，画出的图会变成2倍？
新学HTML5，在画图时发现一个问题，以fillRect为例

当我以其属性height和width控制长宽时，一切正常



<canvas id="cav" style="border:solid 1px #000;" width="600" height="400"></canvas>

如果使用CSS控制长宽时，则我设置的值都变成了2倍，仿佛我设置了scale(2,2)一样



<canvas id="cav" style="border:solid 1px #000;width:600px;height:400px;"></canvas>

请问这是怎么回事呢，有相关说明吗？

以下为测试代码，在firefox和chrome上看到的都一样



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

	<title>test</title>

</head>

<body>

<canvas id="cav1" style="border:solid 1px #000;" width="600" height="300"></canvas>

<br/><br/>

<canvas id="cav2" style="border:solid 1px #000;width:600px;height:300px;"></canvas>



<script type="text/javascript">

//正常

var can = document.getElementById("cav1");

var ctx=can.getContext('2d');

ctx.fillRect(10,10,200,100);

ctx.stroke();



//2倍

can = document.getElementById("cav2");

ctx=can.getContext('2d');

ctx.fillRect(10,10,200,100);

ctx.stroke();

</script>

</body>

</html>

------解决方案--------------------
我以前测试下来
canvas只认本身的width height属性即canvas.width....
而style中的width，height不影响canvas本身的W,H属性只影响可视效果
这样的话如果 canvas默认是 W:300 H:200 而style设置 600,400 则看起来有了拉伸的效果相当于canvas的全局缩放的效果
以上是个人理解

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

为啥通过设置canvas的style来控制其长宽，画出的图会变成2倍

相关资料更多>

推荐阅读更多>