canvas基础知识点介绍.doc

canvas
1 基础概念 2
2 创建canvas 2
3 方法属性 2
4 画一条直线 3
4.1 线条的属性 3
5 画矩形 3
6 画五角星 4
7 图形变换 5
8 状态保存与恢复 6
9 填充样式 6
9.1 线性渐变 6
9.2 径向渐变 6
9.3 使用图片填充 7
9.4 使用画布canvas进行填充 7
10 线条样式 8
11 曲线的绘制 8
11.1 arc() 8
11.2 arcTo() 9
11.3 画月亮 10
11.3.1 三角函数 10
11.3.2 封装画月亮函数 11
11.4 贝塞尔曲线 Bezier 12
11.4.1 二次贝塞尔曲线 12
11.4.2 三次贝塞尔曲线 13
12 文字渲染基础 13
12.1 font属性 13
12.2 textAlign水平对齐 16
12.3 textBaseline垂直对齐 16
12.4 messureText(string).width文本的度量 16
13 阴影 16
14 global全局 17
14.1 globalAlpha 17
14.2 globalCompositeOperation 18
15 剪辑区域clip() 18
1 基础概念
1. canvas标签
HTML5<canvas>元素用于图形的绘制，通过脚本来完成
<canvas>标签只是图形容器，您必须使用脚本来绘制图形
你可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像
只有标准浏览器支持（IE9以上，谷歌，火狐）
canvas不是基于对象的绘制，而是基于状态的绘制
2 创建canvas
html：
<canvas id=’canvas’></canvas>
JavaScript：
var canvas=document.getElementById(‘vanvas’);
canvas.width=500;
cnavas.height=500;
var context=canvas.getContext(‘2d’);
3 方法属性
canvas.width=500; //画布的宽度
canvas.height=500; //画布的高度
canvas.getContext(‘2d’); //创建绘图的上下文环境
context.lineWidth=5; //线条粗细
context.moveTo(100,100); //起始坐标
context.lineTo(200,200); //划到给定的坐标
context.fillStyle=’yellow’ //定义填充颜色
context.fill(); //开始填充，默认填充黑色
context.strokeStyle=’red’; //定义线条颜色
context.stroke(); //开始绘制，默认绘制灰色(128,128,128)
context.beginPath(); //创建新的状态
context.closePath(); //
4 画一条直线
context.moveTo(100,100) 状态设置
context.lineTo(100,100);
context.stroke(); 绘制
4.1 线条的属性
lineWidth：线条粗细
lineCap：设置线条端点
butt：平头端点(默认)
round：圆头端点
square：方头端点
context.lineCap=”square”; //也可以实现图像封闭无缺口（效果等同closePath()）
lineJoin:设置线条连接样式
miter：斜接连接（默认）
round：圆角连接
bevel：斜角连接
miterLimit：默认值为10
当lineJoin为miter时才有效，如果线条相接所产生的内角与外角的距离超过10，将以bevel的方式相连接
5 画矩形
context.rect(x,y,width,height); //定义矩形
context.fillRect(x,y,width,height); //定义并且绘制图形(填充，不能描边)
context.strokeRect(x,y,width,height); //定义并且绘制图形(描边，不能填充)
代码：
context.rect(100,100,300,300);
context.lineWidth=10;
context.strokeStyle='red';
context.fillStyle='green';
context.stroke();
context.fill();
6 画五角星
正弦：对边除以斜边
余弦：邻边除以斜边
正切：对边除以邻边
在编程里面，用的是弧度制：
20度表示为：
20/180*Math.PI //角度转弧度
第一点的坐标( x , y )表示为：
( Math.cos(18/180*Math.PI)*R , -Math.sin(18/180*Math.Pi)*R )
循环遍历输出十个点：
for( var i=0; i<5; i++){
context.lineTo(Math.cos((18+72*i)/180*Math.PI)*300+400,
-Math.sin((18+72*i)/180*Math.PI)*300+400);
context.lineTo(Math.cos((54+72*i)/180*Math.PI)*150+400,
-Math.sin((54+72*i)/180*Math.PI)*150+400);
封装画五角星得到函数：
function drawStar(cxt,R,r,x,y){
cxt.beginPath();
for( var i=0; i<5; i++){
cxt.lineTo(Math.cos((18+72*i)/180*Math.PI)*R+x,
-Math.sin((18+72*i)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((54+72*i)/180*Math.PI)*r+x,
-Math.sin((54+72*i)/180*Math.PI)*r+y);
cxt.closePath();
cxt.stroke();
从软件工程的角度，变化五角星函数：(绘制一个标准的五角星路径)
function starPath(cxt){
cxt.beginPath();
for( var i=0; i<5; i++){
cxt.lineTo(Math.cos((18+72*i)/180*Math.PI),
-Math.sin((18+72*i)/180*Math.PI));
cxt.lineTo(Math.cos((54+72*i)/180*Math.PI)*0.5,
-Math.sin((54+72*i)/180*Math.PI)*0.5);
cxt.closePath();
function drawStar(cxt,x,y,R,rot){
starPath(cxt);
7 图形变换
translate(x,y) 位移
rotate(deg) 旋转 //要把角度制变为弧度制，乘上Math.PI/180
scale(sx,sy) 缩放
transform(a,b,c,d,e,f) 设置变换矩阵
setTransform(a,b,c,d,e,f) 忽略掉之前所有的变换矩阵，重新设置新的变换矩阵
a：水平缩放（1）
b：水平倾斜（0）
c：垂直倾斜（0）
d：垂直缩放（1）
e：水平位移（0）
f：垂直位移（0）
8 状态保存与恢复
save() //保存当前图形的状态
restore() //恢复所保存的图形的状态
9 填充样式
fillStyle
9.1 线性渐变
1. var grd=context.createLinearGradient(xstart,ystart,xend,yend);
2. grd.addColorStop(stop,color);
3. context.fillStyle=grd;
填充白色到黑色的线性渐变：
var linearGrad=context.createLinearGradient(0,0,800,800);
linearGrad.addColorStop(0.0,’white’);
linearGrad.addColorStop(1.0,’black’);
context.fillStyle=linearGrad;
context.fillRect(0,0,800,800);
9.2 径向渐变
1. var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
2. grd.addColorStop(stop,color);
3. context.fillStyle=grd;
填充白色到黑色的线性渐变：
var grd=context.createRadialGradient(400,400,0,400,400,canvas.height/2);
grd.addColorStop(0,'white');
grd.addColorStop(1,'black');
context.fillStyle=grd;
context.fillRect(0,0,800,800);
9.3 使用图片填充
createPattern(img,repeat-style)
repeat-style:no-repeat
repeat-x
repeat-y
repeat
图片填充实例：
var bgImg=new Image();
bgImg.src=”pic.jpg”;
bgImg.onload=function(){
var pattern=context.createPattern(bgImg,”repeat”);
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
9.4 使用画布canvas进行填充
createPattern(canvas,repeat-style)
画布填充实例：
function createBgCanvas(){
var bgCanvas=document.createElement('canvas');
bgCanvas.width=100;
bgCanvas.height=100;
var bgContext=bgCanvas.getContext('2d');
var grd=bgContext.createRadialGradient(50,50,0,50,50,bgCanvas.height/2);
grd.addColorStop(0,'white');
grd.addColorStop(1,'black');
bgContext.fillStyle=grd;
bgContext.fillRect(0,0,100,100);
return bgCanvas;
var bgCanvas=createBgCanvas();
var pattern=context.createPattern(bgCanvas, 'repeat');
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
10 线条样式
strokeStyle
填充的样式，同样使用于线条样式
11 曲线的绘制
11.1 arc()
context.arc(
centerX,centerY,radius, //圆心的坐标centerX，centerY,圆弧半径radius
staringAngle,endingAngle, //开始角度staringAngle，结束角度endingAngle
anticlockwise=false //可选，是否逆时针绘制 ，false表示顺时针绘制
绘制一个圆：
context.arc(100,100,100,0*Math.PI,2*Math.PI);
context.stroke();
绘制一个半圆：
context.arc(100,100,100,0*Math.PI,1*Math.PI);
context.stroke();
封装圆角矩形函数：
function drawRoundRect(cxt,x,y,width,height,radius){
cxt.save();
cxt.translate(x,y);
pathRoundRect(cxt,width,height,radius);
cxt.stroke();
cxt.restore();
function pathRoundRect(cxt,width,height,radius){
cxt.beginPath();
cxt.arc(radius+width,radius+height,radius,0*Math.PI,0.5*Math.PI);
cxt.lineTo(radius,height+2*radius);
cxt.arc(radius,radius+height,radius,0.5*Math.PI,1*Math.PI);
cxt.lineTo(0,radius);
cxt.arc(radius,radius,radius,1*Math.PI,1.5*Math.PI);
cxt.lineTo(radius+width,0);
cxt.arc(radius+width,radius,radius,1.5*Math.PI,2*Math.PI);
cxt.closePath();
drawRoundRect(context,50,50,100,200,50);
11.2 arcTo()
context.arcTo(x1,y1,x2,y2,radius);
x0,y0,x1,y1,x2,y2只是形成两条线段，圆弧的切点不一定要在这两条线段上
上图的代码：
//红线
context.beginPath();
context.moveTo(100,100);
context.arcTo(400,100,400,400,100);
context.strokeStyle='red';
context.lineWidth=5;
context.stroke();
//辅助线
context.beginPath();
context.moveTo(100,100);
context.lineTo(400,100);
context.lineTo(400,400);
context.strokeStyle='black';
context.lineWidth=1;
context.stroke();
11.3 画月亮
11.3.1 三角函数
反三角函数：
反正弦arcsin x，反余弦arccos x，反正切arctan x，反余切arccot x，反正割arcsec x,反余割arccsc x
反三角函数算出来的是弧度。
三角函数表示直角边的比值。
角度转弧度 ：Math.PI/180*角度
弧度转角度 ：180/Math.PI*弧度
在直角三角形中，30度角对应的边是斜边的一半：
sin30°=1/2；
在js里，返回30度角
Math.asin(1/2)*(180/Math.PI);
11.3.2 封装画月亮函数
arc()+arc()
function drawMoon(cxt,x,y,R,r,rot){
cxt.translate(x,y);
cxt.rotate(rot*Math.PI/180);
var i=(R*R-r*r)/(2*r);
cxt.arc(0,0,R,0.5*Math.PI,1.5*Math.PI,true);
cxt.stroke();
cxt.beginPath();
cxt.arc(0-i,0,i+r,Math.atan(R/i),-Math.atan(R/i),true);
cxt.stroke();
drawMoon(context,200,300,100,50,30);
arc()+arcTo()
drawMoon(上下文环境，圆心坐标x，圆心坐标y，圆弧半径，自定义点的坐标x，旋转角度)
function drawMoon(cxt,x,y,R,dot,rot){
cxt.save();
var r=Math.sqrt(R*R+dot*dot)*R/dot;
cxt.translate(x,y);
cxt.rotate(rot*Math.PI/180);
cxt.arc(0,0,R,0.5*Math.PI,1.5*Math.PI,true);
cxt.moveTo(0,0-R);
cxt.arcTo(dot,0,0,R,r);
cxt.restore();
drawMoon(context,200,300,100,200,30);
context.stroke();
context.fill();
11.4 贝塞尔曲线 Bezier
11.4.1 二次贝塞尔曲线
quadraticCurveTo()
context.moveTo(x0,y0); //起始点坐标
context.quadraticCurveTo(x1,y1,x2,y2); //控制点坐标、结束点坐标
11.4.2 三次贝塞尔曲线
bezierCurveTo()
context.moveTo(x0,y0); //起始点坐标
context.bezierCurveTo(x1,y1,x2,y2,x3,y3); //控制点坐标、控制点坐标、结束点坐标
12 文字渲染基础
context.font=’bold 40px Arial’; //设置字体样式
context.fillText(string,x,y,[maxlen]); //给string填充颜色，maxlen（可选）：设置最长值
context.strokeText(string,x,y,[maxlen]); //给string描边
12.1 font属性
默认值：”20px sans-serif”
context.font=”font-style font-variant font-weight font-size font-family”
1. font-style:normal (default)
italic (斜体字)
oblique (倾斜字体)
2. font-variant:nomal (default)
small-caps (小型大写字母)
3. font-weight:lighter
normal (default)
bold
bolder
100,200,300,400(nromal),500,600,700(bold),800,900
4. font-size:20px (default)
2em
150%
xx-small、x-small、medium、large、x-large、xx-large
5. font-family:
web安全字体
a) serif(衬线字体)
b) sans-serif(无衬线字体)
c) monospace(等宽字体)
12.2 textAlign水平对齐
context.textAlign=left/center/right //相对于经过x坐标的y轴的平行线
12.3 textBaseline垂直对齐
context.textBaseline=top/middle/bottom //相对于经过y坐标的x轴的平行线
12.4 messureText(string).width文本的度量
context.measureText(string).width
measureText()函数传入一个字符串，然后返回一个对象，这个对象拥有一个width属性，这个width属性存有传入的字符串在canvas上渲染的时候渲染出的字符串的宽度
13 阴影
context.shadowColor //阴影颜色
context.shadowOffsetX //阴影在x轴上的位移
context.shadowOffsetY //阴影在y轴上的位移
context.shadowBlur //阴影的模糊程度
给矩形加上阴影：
context.fillStyle='green';
context.shadowColor='gray';
context.shadowOffsetX=20;
context.shadowOffsetY=20;
context.shadowBlur=50;
context.fillRect(100,100,300,200);
给文字加上阴影：
var str='canvas';
context.font='bold 80px 微软雅黑';
context.shadowColor='gray';
context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=5;
context.fillStyle='blue';
context.fillText(str,50,300);
14 global全局
14.1 globalAlpha
告诉整个绘制系统，我们即将绘制的所有的图形，都将使用指定的alpha值来设置透明度。
context.globalAlpha=1; (Default)
globalAlpha小案例：
context.globalAlpha=0.7;
for(var i=0; i<100; i++){
var R=Math.floor(Math.random()*255);
var G=Math.floor(Math.random()*255);
var B=Math.floor(Math.random()*255);
context.fillStyle=’rgb(’+R+’,’+G+’,’+B+’)’;
context.beginPath();
context.arc(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*100,0,2*Math.PI);
context.fill();
14.2 globalCompositeOperation
图像的复合操作
context.globalCompositeOperation=’source-over’;
source-over destination-over lighter
source-atop destination-atop copy
source-in destination-in xor
source-out destination-out
globalCompositeOperation小案例：
context.fillStyle=’blue’;
context.fillRect(100,100,400,400);
context.globalCompositeOperation=’source-over’;
context.fillStyle=’red’;
context.beginPath();
context.moveTo(400,300);
context.lineTo(650,700);
context.lineTo(150,700);
context.closePath();
context.fill();
15 剪辑区域clip()
context.clip();
context.beginPath();
context.arc(400,400,150,0,Math.PI*2);
context.clip();
context.font=’bold 150px Arial’;
context.textAlign=’center’;
context.textBaseline=’middle’;
context.fillStyle=’#058’;
context.fillText(‘canvas’,canvas.width/2,canvas.height/2);
16 非零环绕原则
第 19 页