动态的设置cavas的宽高

 1：在js中设置canvas的宽高

注意：在js中设置canvas的宽高时，如果设置方式不正确，或者在cass中设置时，在绘制图像时就会出现拉伸的情况。这是因为canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。

在js中设置canvas的宽高时应当使用以下方法：

[html]  view plain  copy

 

1. document.getElementById("canvas").width = 600;  
2. document.getElementById("canvas").height = 600;  

 2：在js中动态创建canvas

代码如下：

html:

[html]  view plain  copy

 

1. <div id="canvas_box"></div>  

js:

[html]  view plain  copy

 

1. window.onload = function(){  
2. var canvas = document.createElement("canvas");  
3. canvas.style.border = "solid 1px red";  
4. canvas.id = "canvas";  
5. var box = document.getElementById("canvas_box");  
6. box.appendChild(canvas);  
7.   
8. //设置宽高一定要在canvas节点添加之后  
9. document.getElementById("canvas").width = 600;  
10. document.getElementById("canvas").height = 600;  
11.   
12. }