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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签画布

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

先看一下代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><meta name="Keywords" content=""><meta name="author" content="@my_programmer"><style type="text/css">    body{margin:0;}    canvas{margin:20px;            /*width: 400px;           height: 300px;*/          }    </style></head><body onload="draw()">    <canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></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></body></html>

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

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

立即学习“前端免费学习笔记（深入）”；

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

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

文章推荐

HTML5 canvas画布的宽高为什么写在&lt;canvas&gt;标签里的详细介绍

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集

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