canvas教程

html5学习1:认识canvas

字号+ 作者:H5之家 来源:H5之家 2015-09-17 11:04 我要评论( )

从今天开始将不定期陆续撰写html5的学习笔记,这是笔者从0开始的记录,不仅是一个简单的记录,更是一个学习成长的过程,欢迎大家监督。O(∩_∩)O~1、canvas英文

从今天开始将不定期陆续撰写html5的学习笔记,这是笔者从0开始的记录,不仅是一个简单的记录,更是一个学习成长的过程,欢迎大家监督。O(∩_∩)O~

1、canvas英文解释

canvas_百度词典

canvas[英][knvs] [美][knvs]

n.帆布;油画(布)

vt.用帆布覆盖

adj.帆布制的

2、html5中的canvas

在html5中canvas标签用来定义图形,比如图表和其他图像,它只是图形容器,您必须使用脚本来绘制图形。就是ps里面的画布一样哦。它和其他标签如div、a、span等标签一样,只不过它是在html5当中新增的。

3、为什么要学习canvas

未来,简单的抑或复杂的图像、平面动画将可以使用js来编写了,并且js具有公开代码的性质,对其传播和使用将是flash不可比拟的。

4、canvas能做哪些事情

在canvas容器(or画布)里可以画直线、曲线、矩形、圆形等图像(如ps里的矩形工具等),也可以绘制路径(如ps里的钢笔工具)。当然这里只能绘制2D图像,如果需要绘制3D就需要Webgl标签。

5、如何使用canvas

定义canvas的大小尺寸和img标签一样,有width、height属性。在初次使用canvas,需要获得canvas对象,并且需要浏览器支持canvas(谷歌、火狐、ie9+),然后获得对象的上下文。例:

<!DOCTYPE html> <meta charset="utf-8" /> <title>canvas</title> <canvas></canvas> <script type="text/javascript"> window.onload=function() { var my_canvas=document.getElementById('my_canvas'); var context=my_canvas.getContext('2d'); } </script>

【完】

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5学习2:使用canvas画直线

    html5学习2:使用canvas画直线

    2015-10-17 15:51

  • html5学习3:使用canvas画曲线

    html5学习3:使用canvas画曲线

    2015-09-16 12:20

网友点评
a