小白浅谈canvas入门--欢迎大佬点评指正

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

基本用法

1、使用canvas元素必须先设置宽度和高宽属性，如果没有宽高，设置边框属性则为默认大小。
2、要在这块画布上绘图，需要取得绘图上下文对象。即：getContext(‘2d’)

<canvas id="draw" width="400" height="200">你的浏览器不支持</canvas>
<script type="text/javascript">
	var draw = document.getElementById('draw')
	var context=draw.getContext('2d')
	console.log(context)
</script>

fillStyle取值

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle='blue'
cxt.fillRect(0,0,100,100)
cxt.fillStyle='rgba(0,0,255,0.5)'
cxt.fillRect(150,0,100,100)

clearRect()清除画布的矩形区域

本质上，这个API可以把画布变成透明，但先通过生成一个矩形，再清除，可以达到切掉一块的效果

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle='blue'
cxt.fillRect(100,100,100,100)
cxt.fillStyle='red'
cxt.fillRect(130,130,100,100)
cxt.clearRect(150,150,40,40)

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。

接口	参数	功能
rect（）	x,y,width,height	从点x,y开始绘制一个矩形，宽和高分别由width和height指定，这个方法是绘制路径。而不是fillRect()和strokeRect()所绘制的独立形状
arc()	x,y,radius,startAngle,endAngle,counterclockwise 六个参数	以x,y为圆心绘制一条弧线，半径为radius，起始和结束角度分别为startAngle和endAngle，最后一个参数表示角度是否按逆时针方向计算，值为false表示顺时针。
lineTo()	x,y	从上一点开始绘制一条直线，到x,y为止
moveTo()	x,y	将绘图游标移动到x,y，不画线。

按照上图，就能画出圆，半圆，，四分之一圆等等。

var c = document.getElementById("myCanvas");
var con = c.getContext("2d");
con.beginPath()
//绘制外圆
con.arc(0,0,90,0,2*Math.PI,false)//前两个值分别是x，y轴坐标，第三个是半径，第四，五个是起始点
con.fillStyle='blue'  //填充颜色
con.fill()  //填充

只要掌握好了canvas，就可以画出任何你想要的效果。