canvas需要在标签里直接定义宽高

来源：阅读：487 次日期：2014-12-23 11:46:45

温馨提示：小编为您整理了“canvas需要在标签里直接定义宽高”,方便广大网友查阅！

以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在<style>里，看看会有什么不同。自己试了以下，果然有问题。

先看一下代码：

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>canvas</title>

body{margin:0;}

canvas{margin:20px;

/*width: 400px;

height: 300px;*/

}

</style>

</head>

function draw() {

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

context.beginPath();

context.moveTo(20,20);

context.lineTo(200,100);

context.lineWidth=5;

context.stroke();

}

</script>

</body>

</html>

1.宽：400；高：300；直接写在<canvas>里的效果：

2、删除<canvas>里的宽高，宽：400；高：300；写在<style>里的效果：

名单1

为什么两者的效果会不一样呢？

canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。

更多信息请查看IT技术专栏

上一篇：HTML5进度条特效

下一篇：使用canvas绘制超炫时钟

手机网站地址：canvas需要在标签里直接定义宽高

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！