canvas基础命令

context.fillStyle="";//填充样式
context.fillRect(x,y,width,height)//画出一个矩形
context.strokeRect(x,y,width,height)//画出一个边框
context.strokeStyle=""//边框
context.lineWidth=1;//边框线宽


先定义颜色线宽再绘画图形，按顺序执行


context.clearRect(x,y,width,height)擦除指定矩形区域的颜色，使之为透明




context.beginPath();//创建路径
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)//创建圆形路径
context.closePath();//关闭路径
context.fillStyle="";
context.fill();//填充图形
context.stroke();//绘制图形边框


moveTo(x,y)//将光标移到指定位置
lineTo(x,y)//从指定位置开始绘画一条直线


context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)//绘制贝济埃曲线
四个参数分别是第一个控制点的横坐标、第一个控制点的纵坐标，第二个控制点的横坐标，第二个控制点的纵坐标
context.quadraticCurveTo(in float cpx,in float cpy,in float x,in float y)
四个参数分别是控制点的横坐标、纵坐标、二次样条曲线终点的横坐标、二次样条曲线终点的纵坐标


context.createLinearGradient(xStart,yStart,xEnd,yEnd);
//创建线性渐变对象
context.addColorStop(offset,color);
//offset为偏移量，range[0,1]，可添加多个addColorStop


context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
六个属性分别是开始圆的坐标和半径，结束圆的坐标和半径


context.translate(x,y);//图形平移
context.scale(x,y);//图形扩大 两个参数分别是水平方向扩大倍数和垂直方向扩大倍数
context.rotate(angle);//旋转图形




context.transform(m11,m12,m21,m22,dx,dy);//修改变换矩阵
dx dy分别表示x轴和y轴的移动距离


translate(x,y)=transform(1,0,0,1)=ytansform(0,1,1,0,x,y)//1,0,0,1表示不对图形进行缩放操作
scale(x,y)=transform(x,0,0,y,0,0)=tranform(0,y,x,0,0,0)
rotate(angle)=
transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos


(angle*Math.PI/180),0,0)//p116


context.setTranform(m11,m12,m21,m22,dx,dy);//将画布上的最左上角重置为坐标原点


图形组合
context.globalCompositeOperation=type
type的值：
source-over//在原有图形之上画
destination-in//在原有图形之下绘制图形
source-in//只显示重叠部分
destination-out//只显示不重叠的部分
source-atop//
destination-atop//
lighter//重叠部分加色
xor//重叠部分变透明
copy//只绘制新图形和重叠部分


context.shadowOffsetX
context.shadowOffsetY
context.shadowColor
context.shadowBlur//绘制阴影 一次设置所有图形都有阴影，如果要其他图形不再具有阴影效果，将shadowColor设定为rgba(0,0,0,0)


context.drawImage(image,x,y);//绘制图像，x和y为绘制该图像时的起始坐标
context.drawImage(image,x,y,w,h);//绘制图像时同时进行缩放
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);//将局部区域复制到画布上的另一个位置上
image=new Image();
image.src="";//创建image对象，设定路径
image.οnlοad=function(){}边加载边绘制


图像平铺：
一、drawImage()
二、context.createPattern(image,type);
type的值：no-repeat repeat-x repeat-y repeat全方向平铺
先createPattern，再添加到fillStyle()里，最后fill


图像裁剪：
context,clip()//无参数，先创建路径图形，再执行clip()


像素处理：
context.getImageData(sx,sy,sw,sh);//获取指定区域像素，起点横纵坐标+所获区域的宽高
获得的对象是一个CanvasPixelArray对象，具有height、width、data等属性，data数组保存像素数据，内容为


[r1,g1,b1,a1,r2,g2,b2,a2...]
data.length为所取得像素的数量
context.putImageData(imagedata,dx,dy[dirtyX,dirtyY,dirtyWidth,dirtyHeight])//将对像素进行处理过的图像重新绘制在画布上


反相：
imagedata.data[i+0]=255-imagedata.data[i+0];//red
imagedata.data[i+1]=255-imagedata.data[i+0];//green
imagedata.data[i+2]=255-imagedata.data[i+0];//blue


绘制文字：
一、void fillText(text,x,y,[maxWidth]);//maxWidth为文字的最大宽度，防止溢出
二、void strokeText(text,x,y,[maxWidth]);
context.font=''//文字字体
context.textAlign='center/start/end/left/right'//文字对齐
context.textBaseline='top/hanging/middle/alphabetic/ideographic/bottom'//文字垂直对齐方式


获得文字宽度：
metrics=context.measureText(text);//返回一个TextMetrics对象，其中width属性表示text的总宽度
p134


保存绘画状态、恢复绘画状态：
save();//保存到栈中
restore();


保存文件：
canvas.toDataURL(type)
//把当前的绘画状态输出到一个data URL地址所指向的数据中的过程，dataURL就是base64位编码的URL
//把绘画状态输出到一个data URL中，然后重新装载，客户可直接把装载后的文件进行保存


动画制作：原理就是不断擦除重绘
使用到
一、绘画函数中先用clearRect方法将画布整体或局部擦除
二、使用setInterval设置动画间隔时间


eg:
var context;
var width,height;
var i;
function draw(id){
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var context=canvas.getContext('2d');
width=canvas.width;
height=canvas.height;
i=0;
setInterval(rotate,100);
function rotate(){
context.clearRect(0,0,width,height);
context.fillStyle="red";
context.fillRect(i,0,20,20);
i=i+1;
}


}