设置canvas的宽高有两种方式:
1:在html的canvas标签中设置宽高
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
2:在js中设置canvas的宽高
注意:在js中设置canvas的宽高时,如果设置方式不正确,或者在cass中设置时,在绘制图像时就会出现拉伸的情况。这是因为canvas的默认宽高为300px*150px,在css中设置canvas的宽高,实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。
在js中设置canvas的宽高时应当使用以下方法:
document.getElementById("canvas").width = 600;
document.getElementById("canvas").height = 600;
3:在js中动态创建canvas
代码如下:
html:
<div id="canvas_box"></div>
js:
window.onload = function(){
var canvas = document.createElement("canvas");
canvas.style.border = "solid 1px red";
canvas.id = "canvas";
var box = document.getElementById("canvas_box");
box.appendChild(canvas);
//设置宽高一定要在canvas节点添加之后
document.getElementById("canvas").width = 600;
document.getElementById("canvas").height = 600;
}