1 基本用法
1 必须支持<canvas>元素
<canvas id="drawing" width="200" height="200"></canvas>
2 先取得画布的山下文
var drawing = document.getElementById("drawing");
//检测浏览器是否支持<canvas>
if(drawing.getContext){
//do something
}
2 2D上下文
1 描边
2 填充
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
context.strokeStyle = "red";//描边即将要使用的颜色
context.strokeRext(10,10,30,40);//起点坐标为(10 ,10) 宽30 高40
context.fillStyle = "blue";//填充即将要使用的颜色//context.fillStyle="rgba(0,0,255,0.5)";//最后一个为透明度
context.fillRect(30,30,50,50);绘制矩形
context.clearRect(40,40,10,10);//清楚矩形区域
}
3 绘制路径
首先必须调用beginPath()
1 arc(x,y,radius,starAngle,endAngle,counterclockwise)
以x/y为圆形绘制一条弧线，弧线半径为radius,起始角度，结束角度，最后一个是方向，false顺时针
2 arcTo(x1,y1,x2,y2,radius);从上一点开始绘制一条弧线，半径radius
3 bezierCurveTo(c1x,c1y,c2x,c2y,x,y);从上一个点开始绘制一条曲线，到（x,y）为止，并且
以（c1x,c1y）和（c2x,c2y）为控制点
4 lineTo(x,y)从上一点开始绘制一条直线，到(x,y)为止
5 moveTo(x,y)将画笔移动到（x,y）不画线
6 quadraticCurveTo(cx,cy,x,y);从上一点开始绘制一条二次曲线，到（x,y）为止，并以(cx，cy)作为控制点
7 rect(x,y,width,height);以点（x,y）开始绘制一个矩形，宽度和高度
创建路径后，可以用closePath()连接到起点。也可以用fillStyle()填充，调用fill();
也可以stroke()描边，strokeStyle. clip()剪切区域
1 基本用法