阅读 73

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指定的大小(会进行缩放)渲染到浏览器页面
  • 要想图片不变模糊,应该以原像素大小设置画布的大小
文章分类
前端
文章标签