这篇文章给大家分享的是有关canvas中怎么设置width与height的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。最近因为工作需要，所以就学了一下html中的Canvas标签。Canvas是HTML5新增的组
这篇文章给大家分享的是有关canvas中怎么设置width与height的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
最近因为工作需要，所以就学了一下html中的Canvas标签。
Canvas是HTML5新增的组件，它就像一块幕布，可以用javascript在上面绘制各种图表、动画等。
没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。
当我看了一下教程后，自己写了一个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>上面代码的意思，是要在一个width和height各为200px的canvas上画一条直线，该直线的起点为(0,0)，终点为(200,200);
然而浏览器画出来的图像却是：
一看这图~怎么是这样的斜度？不应该啊~本应该是一个对角线才对啊~~
后来差了一下资料才知道，canvas标签设置width和height的时候，有以下几种方式和产生的后果：
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法：
方法一：
<canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法二：使用HTML5 Canvas api操作
var canvas = document.getElementById('欲操作canvas的id');
canvas.width = 500;
canvas.width = 500;若通过如下方法设置宽高，那么Canvas元素将由原来大小被拉伸到所设置的宽高：
方法一：使用CSS 会被拉伸
#欲操作canvas的id｛
width:1000px;
height:1000px;
｝也包含了行间样式中的 style="" 。也就是上面的例子，也会产生拉伸的情况。
方法二：使用HTML5 Canvas API操作 会被拉伸
var canvas = document.getElementById('欲操作canvas的id');
canvas.style.width = "1000px";
canvas.style.height = "1000px";
方法三 ：用Jquery的$("#id").width(500);会被拉伸其它：canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示
所以，通过上面的资料便可知道其原因就是我上面例子中代码会让canvas的宽高被拉伸了，从而使得图像跟预想的不一致的。
现在我重写了一份正确设置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>结果：
感谢各位的阅读！关于“Canvas中怎么设置width与height”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: Canvas中怎么设置width与height
本文链接: https://lsjlt.com/news/256182.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0