canvas教程

H5学习之5 canvas的运用

字号+ 作者:H5之家 来源:H5之家 2017-10-25 08:27 我要评论( )

!DOCTYPEhtmlhtmlbodycanvasid=

H5学习之5 canvas的运用

<!DOCTYPE html> <html > <body> <canvas > <!--创建画布canvas,并且设置其id,宽度,高度,样式 具体画东西的过程放在script标签里 --> </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); /*获取画布myCanvas,c也就变成了myCanvas*/ var cxt= c.getContext("2d"); /*创建画布上的画笔cxt。通过cxt= c.getContext("2d")创建了在c上的画笔,也就是在myCanvas上的画笔*/ cxt.moveTo(10,10);/*将画笔点移动到10,10*/ cxt.lineTo(150,50);/*从10,10画一条线到150,50,此时画笔坐标也就移动到了150,50*/ cxt.lineTo(10,50); cxt.stroke();/*结束路径,必须有的*/ </script> </body> </html>具体效果如下

思路解释:

在body里创建canvas标签,就是画布。

<canvas > <!--创建画布canvas,并且设置其id,宽度,高度,样式 具体画东西的过程放在script标签里 --> </canvas>然后在script里书写画画函数,首先获取创建的canvas 的id myCanvas,也就是获取了canvas。

var c=document.getElementById("myCanvas"); /*获取画布myCanvas,c也就变成了myCanvas*/接着 创建一个跟 myCanvas绑定的画笔,通过画笔函数来画出图像。

var cxt= c.getContext("2d"); /*创建画布上的画笔cxt。通过cxt= c.getContext("2d")创建了在c上的画笔,也就是在myCanvas上的画笔*/ cxt.moveTo(10,10);/*将画笔点移动到10,10*/ cxt.lineTo(150,50);/*从10,10画一条线到150,50,此时画笔坐标也就移动到了150,50*/ cxt.lineTo(10,50); cxt.stroke();/*结束路径,必须有的*/

html5canvas

猜你在找

 

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

相关文章
  • open canvas-sm国产调教qvod-吉田亚?bit

    open canvas-sm国产调教qvod-吉田亚?bit

    2017-10-24 16:18

  • canvas实现动态时钟

    canvas实现动态时钟

    2017-10-23 16:00

  • 《HTML5程序设计(第2版)》扫描版[PDF]

    《HTML5程序设计(第2版)》扫描版[PDF]

    2017-10-23 15:03

  • canvas学习笔记(中篇) 10h搞定canvas基础系列

    canvas学习笔记(中篇) 10h搞定canvas基础系列

    2017-10-23 14:27

网友点评
c