Canvas中设定width与height的难题浅析

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

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

近期由于工作中必须,因此就学了1下Html中的Canvas标识。

Canvas是HTML5新增的组件,它就像1块幕布,能够用JavaScript在上面绘图各种各样图表、动漫等。

沒有Canvas的时代,制图只能依靠Flash软件完成,网页页面迫不得已用JavaScript和Flash开展互动。有了Canvas,大家就不再必须Flash了,立即应用JavaScript进行绘图。

当我看了1下实例教程后,自身写了1个hello world的情况下,不便事就出現了。看下面编码:

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</canvas>
<script>
    var oC = document.getElementById('canvas1');
    var ctx = oC.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>
</body>
</html>

上面编码的意思,是要在1个width和height各为200px的canvas上画1条平行线,该平行线的起始点为(0,0),终点站为(200,200);

但是访问器画出来的图象确是:

1看这图~如何是这样的斜度?不可该啊~本应当是1个对角线才对啊~~

后来差了1下材料才了解,canvas标识设定width和height的情况下,有下列几种方法和造成的不良影响:

Canvas元素默认设置宽 300px, 高 150px, 设定其宽高可使用以下方式:
方式1:
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方式2:应用HTML5 Canvas API实际操作
1 var canvas = document.getElementById('欲实际操作canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;

若根据以下方式设定宽高,那末Canvas元素将由原先尺寸被拉伸到所设定的宽高:
方式1:应用CSS 会被拉伸
1 #欲实际操作canvas的id{
2     width:1000px;
3     height:1000px;
4 }

也包括了行间款式中的 style="" 。也便是上面的事例,也会造成拉伸的状况。
方式2:应用HTML5 Canvas API实际操作 会被拉伸
1 var canvas = document.getElementById('欲实际操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方式3 :用jquery的$("#id").width(500);会被拉伸

其它:canvas的width和height也不可以用百分比表明。canvas会将百分值当做标值显示信息

 因此,根据上面的材料即可了解其缘故便是我上面事例中编码会让canvas的宽高被拉伸了,从而使得图象跟料想的不1致的。

如今我重新写过了1份正确设定canvas宽伟岸小的编码事例:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(0, 0);
    cxt.lineTo(200, 200);
    cxt.stroke();
</script>
</body>
</html>

結果:

完毕。

总结

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