Canvas基础(一)

一.Canvas的概念

Canvas中的关键部分是2D渲染上下文。

2D渲染上下文是一种基于屏幕的标准绘图平台。它采用平面的笛卡儿坐标系统。

二.绘制基本图形与线条

绘制一个正方形需调用context.fillRect(x,y,width,height);

与fillRect相对应的方法是strokeRect。fillRect绘制一个矩形并给它填充颜色，strokeRect则绘制一个矩形并给它绘制表框。

1.绘制线条

绘制线条称为路径，要调用beginPath方法，下一个要调用的方法是moveTo,它会设置要绘制路径的原坐标(x,y),然后调用lineTo方法设置线条的终点坐标(x,y),

在调用closePath完成路径的绘制。最后，调用stroke绘制它的轮廓，显示线条。具体如下：

 context.beginPath();  //开始路径

 context.moveTo(200,200);  //设置路径原点

 context.lineTo(300,300);  //设置路径终点

 context.closePath();   //结束路径

 context.stroke();     //绘出路径轮廓

2.绘制圆形

canvas中没有专门绘制圆形的方法，因为需要利用绘制圆弧来绘制圆形。

方法如下：

 context.beginPath();  //开始路径

 context.arc(x,y,radius,startAngle,endAngle,anticlockwise);  /*创建一个圆形，其中(x,y)为圆心的坐标，radius：圆弧 半径，startAngle：开始角度，endAngle：结束角度，anticlockwise：圆弧按逆时针绘制为true，否则false*/

 context.closePath();  //结束路径

 context.fill();   //填充路径，与stroke类似

     注意：Canvas中的角度是以弧度而不是角度为单位的，将角度换算成弧度

         var degrees=1;  //1度

         var radians=degrees*(Math.PI/180);  //弧度=度数*(π/180)

3.样式

填充颜色:context.fillStyle="rgb(255,0,0)"

线条边框颜色：context.strokeRect="rgb(255,0,0)";

当运用了上述方法后，所有的图形都会采用这个颜色，因此在绘制不同图形之前可重复调用上述方法用以设置不同颜色。

4.文本编辑

canvas不仅可以绘制图形，还能够显示文本，但是是以图像形式绘制的，因此绘制的文字无法编辑，不能选定。(如果可以尽量使用HTML创建文本)

 var context="Hello World!";

 context.font="30px serif";   //修改字号和字体

 context.fillText(text,100,100);   //strokeText可加粗字体

5.擦除canvas

context.clearRect(0,0,canvas.width(),canvas.height());或根据要擦除的图形的具体位置删除图形

6.重置canvas

 canvas.attr("width",canvas.width());

 canvas.attr("height",canvas.height());

四.巩固练习

利用Canvas绘制一个五角星



注：学习Canvas最好用JavaScript，jQuery相对来说没有那么便利