HTML5-canvas

1.canvas 基础

<canvas width="1024" height="768"></canvas>

css:制定的是画布的大小  width ：制定canvas内里的元素分辨率

2.canvas：是状态绘制，即先设置好状态，再执行绘制，如：

var context=canvas.getContext("2d");

context.moveTo(100,100);//笔尖移到该位置，即起始点

context.lineTo(700,700);//笔尖要从起始位置移动到的位置，即终点

context.lineWidth=5;//线的宽度

context.strokeStyle="#005588";//绘制颜色 ，使用css字符串

context.stroke();//执行绘制线条

context.fillStyle="red";//填充颜色

context.fill();//填充(对context.closePath()没有作用，会自动首尾相连)

3.绘制分割:

　　当我们绘制的图像不是封闭的，它将该图像收尾相连（避免这种情况，只用其中的一种即可，不可组合使用）

　context.beginPath();

　context.closePath();

4.绘制弧线 arc

 context.arc(centerx,centery,radius,stratingAngle,endingAngle,anticlockwise=false);

圆心坐标：centerx,centery

半径：radius

弧度开始与结束：stratingAngle,endingAngle  (0，0.5，1，1.5，2)PI

顺时针绘制：anticlockwise=false

逆时针绘制：anticlockwise=true

 

未完待续。。。。。