canvas画图

最近有使用canvas画图的需求，所以整理一下用到的知识

简单使用

<canvas id="myCanvas" width="200" height="100"></canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

常见配置

moveTo(x,y) ：定义线条开始坐标
lineTo(x,y)： 定义线条结束坐标
fillStyle：颜色填充
strokeStyle：描边颜色
fill()：填充
stroke：描边
ctx.lineWidth：线宽
lineJoin：两条线交界处的处理
lineCap：一条线的两端的处理
beginPath() 和 closePath()
这两个函数可以起到类似

的作用，用它来把每个图形包围，就可以绘制不同颜色的图形了

画图

圆弧

arc(x,y,r,start,stop, bolean)
arc(x, y, r, startAngle, endAngle, anticlockwise)
以（x, y）为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束，anticlockwise是布尔值，true表示逆时针，false表示顺时针（默认顺时针）
注意：1. 这里的度数都是弧度； 2. 0弧度是指的x轴正方形
arcTo(x1, y1, x2, y2, radius)：绘制的圆弧就是两条直线相切的与圆弧

画点

drawPoint