js学习之canvas的基础与应用(一)(1)

下面就来了解具体画的东西，线段，圆等

1.线段： ctx.move(x,y) 表示将画笔抬起移动到x,y这个像素点  ctx.lineTo(x,y) 画一条直线从起始点到此时的x,y这个像素点。ctx.stroke()对线段进行描边  ctx.lineWidth = 20 设置线段的宽度  ctx.closePath() 闭合当前的路径 ctx.strokeStyle = ‘green’ 表示所描边的颜色。下面就是一个实际的例子，上面也有代码的注释。

2.作画成矩形：ctx.rect(x,y,长,宽)  x与y表示作画矩形的左上角的顶点在使用这种方式时也要注意路径的问题  ctx.fillRect(x,y,长,宽）这表示自动填充这个矩形的内部颜色，默认情况下内部填充的颜色是黑色，采用这种方式时不需要注意路径的问题  ctx.strokeRect(x,y,长,宽),自动进行描边，这种方式不需要注意路径问题  ctx.clearRect(x,y,长,宽)表示擦除当前的矩形的区域。接下来就是这个实际例子的应用，上面也有具体的每种方式要注意的内容，在这里换用画布实现了矩形下落的这个动画效果。

3.弧角  arc(x,y,起始弧度,结束弧度,方向)  这里使用弧度时需要注意的是要使用Math.PI/180*n的形式来表示，方向用0和1来表示的，0表示顺时针 1表示逆时针 在这里尤其需要注意的是顺时针与逆时针结合的问题 例如角度是顺时针的90度，则表示的是1/4个圆 逆时针是3/4个圆。下面就是弧角的应用