H5之canvas简单入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5之canvas简单入门相关的知识，希望对你有一定的参考价值。
<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图
<canvas id="myCanvas" width="400" height="400"></canvas>默认宽度300px，默认高度 150px;
下面是简单的语法，是必须要记住的。
绘图路径:
beginPath() :开始路径
closePath():结束路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法 画线 默认为黑色
fill():填充方法
rect(x,y,w,h):矩形路径
save():保存路径
restore():恢复路径
简单的圆形绘制
绘制圆形：
arc(x,y,r,0,360360*Math.PI/180,false)
x,y 圆心坐标位置
r 圆半径
0,360 从0度到360度 绘制一个圆形
true/false 顺时针/逆时针绘图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #can{background:#FFBBAA;} </style> </head> <body> <canvas id="can" width="500" height="500"> <script type="text/javascript"> var oCan=document.getElementById("can"); var content=oCan.getContext(‘2d‘); content.translate(250,250); //外 content.save(); content.beginPath() content.arc(0,0,150,0,360*Math.PI/180,false); content.lineWidth=20; content.closePath(); content.strokeStyle="#c20f24"; content.stroke(); content.restore() //中 content.save(); content.beginPath() content.arc(0,0,100,0,360*Math.PI/180,false); content.lineWidth=30; content.strokeStyle="#c20f24"; content.stroke(); content.closePath(); content.restore() content.fillStyle="#0b1c3a"; content.fill(); //五角星 for(var i=0;i<5;i++){ content.save(); content.rotate(i*72*Math.PI/180); content.beginPath() content.fillStyle="#fff"; content.strokeStyle="#fff"; content.moveTo(0,-100); content.lineTo(-25,-30); content.lineTo(0,0) content.lineTo(25,-30); content.closePath(); content.stroke(); content.fill(); content.restore() } </script> </canvas> </body> </html>
我也是刚刚学习，不足之处，多多指出，大家共同学习。
以上是关于H5之canvas简单入门的主要内容，如果未能解决你的问题，请参考以下文章