canvas是HTML5中新增的标记，一般称为画布，即一块可以用来绘制图像的区域。
在网页中使用canvas非常简单，一般格式为：
<canvas id="canvas" width="500" height="300"> 你使用的浏览器不支持此功能 </canva>
在其中需要设置canvas的宽度和高度，即width和height属性，这两个值分别是canvas区域包括的像素的宽度和高度。而使用CSS还可以设置canvas的视在宽度和高度：
#canvas{
width:800px;
height:600px;
}
其中使用的是ID选择器，如果一个页面中有多个canvas，可以分别来进行设置，而使用标记选择器则会设置为同一种样式，有时候会不方便。
CSS中设置的宽度和高度可以称为视在宽度和高度，即表面看起来的宽高，而实际的像素宽高则是由canvas行内样式定义的，如果两处设置的值不同，就会进行缩放显示。
有时候需要动态改变canvas的宽高，这就需要使用JavaScript代码来设置。使用之前一般都要先获取canvas的引用：
const canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
如果要设置行内样式的宽高，即实际像素的宽高，设置方式为：
canvas.setAttribute('width',pixelwidth);
canvas.setAttribute('height',pixelheight);
其中，pixelwidth和pixelheight为canvas实际的宽度和高度像素值。
有时也需要设置canvas的视在宽高，即实际显示的宽度和高度，主要是为了页面的排布比较美观，能与其他页面元素比较相配，不至于过大或过小而不协调。设置方法为：
canvas.style.setProperty('width',showwidth+'px');
canvas.style.setProperty('height',showheight+'px');
其中，showwidth和showheight为canvas显示的宽度和高度。
可以看出，canvas实际的宽高与显示的宽高设置时使用的方法是有区别的，而且设置实际宽高时直接使用整数数值，而设置显示宽高则需要在整数数值后面加上"px"组成一个字符串。
通过使用JavaScript代码方式，可以随时根据需要改变canvas的宽度和高度，以方便进行相应操作。