canvas元素大小与绘图表面大小的关系

1 默认大小

如果不设置canvas大小，浏览器默认的大小事是200*150px。我们可以通过canvas属性设置width(宽)’、height(高)设置其大小，如下所示：

    <canvas id="canvas" width="600" height="300"></canvas>
复制代码

也可以使用css设置canvas大小如下：

 #canvas {
            width: 800px;
            height: 400px;
        }
复制代码

我们知道使用css设置元素的宽高和同时使用属性设置元素的宽高，最终浏览器渲染元素的大小是和css设置的一样，也就是宽 800培训，高400px,这个可以使用chrome的develop工具查看。

2 使用canvas画图

canvas的绘制方式：我们查看如下代码

• 我们设置canvas宽为800px,高为400px，边框为4px、实线、颜色为#333。代码如下

 #canvas {
            margin: 20px 0 0 40px;
            border: 4px solid #333;
            width: 800px;
            height: 400px;
        }
复制代码

• html如下（不解释）

<canvas id="canvas"></canvas>
复制代码

• js代码如下

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = '5px';
    ctx.strokeStyle = 'blue'; // 设置描边颜色
    ctx.strokeRect(40,30,200,100);
复制代码

这段代码的意思，获取canvas的绘图环境，设置线宽为5px，描边颜色为‘blue’,最后以上面属性描边矩形。其中矩形位置为左上角40px,30p的位置开始绘制宽度为200px,高为100px的矩形。效果如下

我们知道，其中黑色框的宽度为800px,高为400px，蓝色框的宽是我们绘制200px、高是100px。仔细观察，其中蓝色框的宽度明显不是我们绘制的200px，而是远远大于这个值。这是什么原因呢？？

下面我们设置canvas的属性设置其宽高，

• css代码中删除width和height
• html设置如下

    <canvas id="canvas" width="800" height="400"></canvas>
复制代码

• js代码不变

再看效果如何：

比较使用不同值来设置元素大小与绘制的效果

其实我们使用css设置canvas元素的大小，不过效果与使用width、height设置的效果并不一样。

1. canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个是绘图表面（drawing surface）的大小
2. 当canvas元素的大小不合符其绘图表面的大小时，浏览器会对绘图表面的小进行缩放，使其符合canvas元素的大小。浏览器会自动缩放后置，不会缩放元素的大小。

所以我们第一种方式绘制的200px宽度的矩形，实际上在页面上显示是接近800px而与200px相差甚远。具体缩放大小我们也很容易计算。默认canvas的width是300，实际设置的大小时800px,所以宽度缩放的比例是800/300倍。同样高度缩放的比例为：400/150倍

提示：根据canvas绘图表面的性质，我们可以做一个高清显示的绘图操作。

转载于:https://juejin.im/post/5b979dbd6fb9a05cf22fde45