一.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)
填充颜色: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相对来说没有那么便利