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

上一篇：详解应用双缓存文件处理Canvas clearRect引发的闪屏 返回下一篇：没有了