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

日期:2021-02-27 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

序言

近期在学习培训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定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。
 

上一篇:W3C发布全新的HTML5规范草案 返回下一篇:没有了