javascript 使用canvas绘画

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 基本用法

1 基本用法