canvas中width和style的区别以及图片模糊问题

width和style.width

在canvas中，width属性和style中的width两者的含义是不一样的。因为在canvas中有一个关于“画布”的概念。canvas中的图形都是在“画布”上绘制的；而style是绘制的图形最终呈现在浏览器中的样式。

<!--以下两者的含义不同-->
<canvas id="mycanvas1" width="540" height="258">浏览器不支持canvas</canvas>
<canvas id="mycanvas2" style="width:540px;height:258px">浏览器不支持canvas</canvas>

呈现示例

我们以百度logo图片为例，分别设置不同的width和style.width来看看最终的呈现效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
</head>
<style>
    .canvas1{
        border: 1px solid #000;
    }
    .canvas2{
        border: 1px solid #000;
        width: 540px;
        height: 258px;
    }
    .canvas3{
        border: 1px solid #000;
        width: 540px;
        height: 258px;
    }
    .canvas4{
        border: 1px solid blue;
        width: 270px;
        height: 129px;
    }
    .canvas5{
        border: 1px solid blue;
        width: 270px;
        height: 129px;
    }
    .canvas6{
        border: 1px solid blue;
        width: 270px;
        height: 129px;
    }
</style>
<body>
    <canvas id="mycanvas1" class="canvas1" width="540" height="258">浏览器不支持canvas</canvas>
    <canvas id="mycanvas2" class="canvas2">浏览器不支持canvas</canvas>
    <canvas id="mycanvas3" class="canvas3" width="270" height="129">浏览器不支持canvas</canvas>
    <canvas id="mycanvas4" class="canvas4">浏览器不支持canvas</canvas>
    <canvas id="mycanvas5" class="canvas5" width="540" height="258">浏览器不支持canvas</canvas>
    <canvas id="mycanvas6" class="canvas5" width="270" height="129">浏览器不支持canvas</canvas>
    <script>
    	var canvas1 = document.getElementById("mycanvas1");
        var canvas2 = document.getElementById("mycanvas2");
        var canvas3 = document.getElementById("mycanvas3");
        var canvas4 = document.getElementById("mycanvas4");
        var canvas5 = document.getElementById("mycanvas5");
        var canvas6 = document.getElementById("mycanvas6");
        var ctx1 = canvas1.getContext("2d");
        var ctx2 = canvas2.getContext("2d");
        var ctx3 = canvas3.getContext("2d");
        var ctx4 = canvas4.getContext("2d");
        var ctx5 = canvas5.getContext("2d");
        var ctx6 = canvas6.getContext("2d");
        var img = new Image();
        img.src = "https://www.baidu.com/img/bd_logo1.png";
        img.onload = function() {
            var imgWidth = img.width;
            var imgHeight = img.height;
            ctx1.drawImage(img,0,0)
            ctx2.drawImage(img,0,0)
            ctx3.drawImage(img,0,0)
            ctx4.drawImage(img,0,0)
            ctx5.drawImage(img,0,0)
            ctx6.drawImage(img,0,0,imgWidth,imgHeight,0,0,imgWidth/2,imgHeight/2)
        }
    </script>
</body>
</html>

呈现结果

结果分析

canvas1:style.width和width参数设置一致，也就是说画布的大小和呈现的大小是一样的，因此图片正常显示。
canvas2:style.width设置了参数，width未设置，当width和height属性没有设置时，画布的大小就会采用默认属性值（width:300、height:150）。在默认大小的画布上绘制图片，然后再以style的大小对图片进行缩放（此处为放大）。
canvas3:style.width和width都设置了参数，原理和canvas2相同，只是缩放的比例不一样。
canvas4:style.width设置了参数，width未设置，原理和canvas2相同，只是大小上为canvas2的一半。此处可以看出，canvas的大小是由style设置的大小决定的。
canvas5:style.width和width都设置了参数，此处画布设置的大小和图片本身的大小一样，所以图片以原像素绘制。
canvas6:style.width和width都设置了参数，此处画布设置的大小是图片本身的大小的一半，所以图片像素有损失，图片因此变得模糊。要想图片不变模糊，应该以原像素大小设置画布的大小。

总结

width和height属性设置的是画布大小，canvas根据画布尺寸来绘制图像，canvas画布本身的大小就是默认值300*150
style中的width和height设置的是canvas的在浏览器中的显示大小
canvas先是根据自身画布大小进行绘制，绘制完毕，由style指定的大小（会进行缩放）渲染到浏览器页面
要想图片不变模糊，应该以原像素大小设置画布的大小