Canvas中怎么设置width与height
这篇文章给大家分享的是有关Canvas中怎么设置width与height的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
目前创新互联公司已为上千家的企业提供了网站建设、域名、网站空间、绵阳服务器托管、企业网站设计、东营网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
最近因为工作需要,所以就学了一下Html中的Canvas标签。
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。
没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。
当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了。看下面代码:
上面代码的意思,是要在一个width和height各为200px的canvas上画一条直线,该直线的起点为(0,0),终点为(200,200);
然而浏览器画出来的图像却是:
一看这图~怎么是这样的斜度?不应该啊~本应该是一个对角线才对啊~~
后来差了一下资料才知道,canvas标签设置width和height的时候,有以下几种方式和产生的后果:
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:
方法一:
若通过如下方法设置宽高,那么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宽高大小的代码例子:
结果:
感谢各位的阅读!关于“Canvas中怎么设置width与height”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页名称:Canvas中怎么设置width与height
URL分享:http://myzitong.com/article/gejjio.html