H5 canvas中width、height和style的宽高差别详解

序言

近期在学习培训canvas特性中遇到1个小难题,便是canvas的width和height，根据搜索有关的材料终究处理，因此下面将处理的全过程共享出来给大伙儿，下面话很少说了，来1起看看详尽的详细介绍吧

Canvas 的width height特性

1、当应用width height特性时，显示信息一切正常不容易被拉伸；以下

<canvas id="mycanvas" width="300" height="300">访问器不适用Canvas,请升級或改用其它访问器！</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
</script>

运作实际效果以下，为对角线

2、应用style时图象会被拉伸（形变），

<style>
         
        #mycanvas {
            width: 150px;
            height: 150px;
        }
    </style>

运作实际效果

怎样了解？？？能够这么了解————

Canvas 是1个画板和1张画纸，画板非常于1个器皿，画图/工作是在画纸勤奋行的，

画板和画纸的默认设置宽高是300*150，当画纸与画板宽高相同时，图象不容易被拉伸，当画纸与画板宽高不1样时，图象就会被拉伸（形变）。

1， width 和 height 特性是设置画板和画纸的宽高，

如： width=”300” height=”300” 即画板的宽高是300*300，画纸的宽高也是300*300，工作的300*300 的对角线图象就不容易被拉伸

2， style款式 里设置的是仅画板的宽高，画纸的宽高還是为默认设置值300*150，

（以上图为例）因而所工作的300*300的对角线图象唯一1一部分画在画纸上，以下：

Btw 画纸不容易让画板就这么空出1片，因而画纸连同图象就要1起拉伸到跟画板尺寸1样。在此事例之中，画纸宽与画板宽都为30，而高为画板的1半，因而只需将高拉伸1倍便可，so 图象也1起被拉伸变瘦，X方位不会改变，Y方位增至1倍， 因此就获得了形变以后的照片

引入 //www.jb51.net/html5/643939.html 的1段总结

有关HTML5中Canvas的宽、高设定难题
Canvas元素默认设置宽 300px, 高 150px, 设定其宽高可使用以下方式(不容易被拉伸)：
方式1：
       <canvas width="500" height="500"></canvas>
方式2：应用HTML5 Canvas API实际操作 OK
       var canvas = document.getElementById('欲实际操作canvas的id');
       canvas.width = 500;
       canvas.width = 500;
若根据以下方式设定宽高，那末Canvas元素将由原先尺寸被拉伸到所设定的宽高：
方式1：应用CSS 会被拉伸
     #欲实际操作canvas的id｛
          width:1000px;
          height:1000px;
     ｝
方式2：应用HTML5 Canvas API实际操作 会被拉伸
      var canvas = document.getElementById('欲实际操作canvas的id');
      canvas.style.width = "1000px";
      canvas.style.height = "1000px";
方式3 ：用jquery的$("#id").width(500);会被拉伸
其它：canvas的width和height也不可以用百分比表明。canvas会将百分值当做标值显示信息

总结

以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值，假如有疑惑大伙儿能够留言沟通交流，感谢大伙儿对脚本制作之家的适用。