IT技术互动交流平台

如何对Canvas里的width与height进行设置

作者:whl  发布日期:2018-11-13 08:57:00

  Canvas是HTML5里最新增加的一个元素,电脑用户绘制图形的时候用其进行操作会发现过程变得十分简单快捷。下面主要给大家对Canvas中设置width和height将会出现的问题进行详细解答,示例代码也有给大家一一列出,有需要的朋友赶紧一起来学习吧!

  最近因为工作需要,所以就学了一下Html中的Canvas标签。

  Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。

  没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

  当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了。看下面代码:

hello world代码

  上面代码的意思,是要在一个width和height各为200px的canvas上画一条直线,该直线的起点为(0,0),终点为(200,200);

  然而浏览器画出来的图像却是:

画出来的图像

  一看这图~怎么是这样的斜度?不应该啊~本应该是一个对角线才对啊~~

  后来差了一下资料才知道,canvas标签设置width和height的时候,有以下几种方式和产生的后果:

产生的后果

  所以,通过上面的资料便可知道其原因就是我上面例子中代码会让canvas的宽高被拉伸了,从而使得图像跟预想的不一致的。

  现在我重写了一份正确设置canvas宽高大小的代码例子:

canvas宽高代码例子

  结果:

结果

  总结

  看到这里相信大家都发现Canvas的好处了吧,想起以前用Flash插件导致的一堆麻烦事实在是一把辛酸泪,可以说Canvas的出现一定程度上解放了大家的双手,不再再花费大量的时间来操作了。如果大家对上面的讲解还有疑问的话可以留言,小编会和大家一起讨论解决的。

延伸阅读:

  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规