HTML5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍

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

先看一下代码：

nbsp;html>


<meta><title>canvas</title><meta><meta><style>
    body{margin:0;}
    canvas{margin:20px; 
           /*width: 400px;
           height: 300px;*/
          }    
</style>
    <canvas></canvas><script>
    function draw() {
        var canvas=document.getElementById(&#39;canvas&#39;);
        var context=canvas.getContext(&#39;2d&#39;);
        context.beginPath();
        context.moveTo(20,20);
        context.lineTo(200,100);
        context.lineWidth=5;
        context.stroke();
    }
</script>

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

2、删除里的宽高，宽：400；高：300；写在

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

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

 

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！