html5 canvas 详细使用教程
话不多说，请看代码
<!DOCTYPEhtml">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
functiondraw21(id){
varcanvas=document.getElementById(id)
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0,0,100,100);
//实践表明在不设施strokeStyle下的默认strokeStyle=black
context.strokeRect(120,0,100,100);
//设置纯色
context.fillStyle="red";
context.strokeStyle="blue";
context.fillRect(0,120,100,100);
context.strokeRect(120,120,100,100);
//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
context.fillStyle="rgba(255,0,0,0.2)";
context.strokeStyle="rgba(255,0,0,0.2)";
context.fillRect(240,0,100,100);
context.strokeRect(240,120,100,100);
}
functiondraw22(id){
varcanvas=document.getElementById(id)
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0,0,100,100);
//实践表明在不设施strokeStyle下的默认strokeStyle=black
context.strokeRect(120,0,100,100);
//设置纯色
context.fillStyle="red";
context.strokeStyle="blue";
context.fillRect(0,120,100,100);
context.strokeRect(120,120,100,100);
//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
context.fillStyle="rgba(255,0,0,0.2)";
context.strokeStyle="rgba(255,0,0,0.2)";
context.fillRect(240,0,100,100);
context.strokeRect(240,120,100,100);
context.clearRect(50,50,240,120);
}
functiondraw23(id){
varcanvas=document.getElementById(id);
if(canvas==null){
returnfalse;
}
varcontext=canvas.getContext('2d');
varn=0;
//左侧1/4圆弧
context.beginPath();
context.arc(100,150,50,0,Math.PI/2,false);
context.fillStyle='rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle='rgba(255,0,0,0.25)'
context.closePath();
context.stroke();
//右侧1/4圆弧
context.beginPath();
context.arc(300,150,50,0,Math.PI/2,false);
context.fillStyle='rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle='rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
}
functiondraw0(id){
varcanvas=document.getElementById(id);
if(canvas==null){
returnfalse;
}
varcontext=canvas.getContext('2d');
context.beginPath();
context.arc(200,150,100,0,Math.PI*2,true);
//不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
context.closePath();
context.fillStyle='rgba(0,255,0,0.25)';
context.fill();
}
functiondraw1(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
varn=0;
vardx=150;
vardy=150;
vars=100;
context.beginPath();
context.fillStyle='rgb(100,255,100)';
context.strokeStyle='rgb(0,0,100)';
varx=Math.sin(0);
vary=Math.cos(0);
vardig=Math.PI/15*11;
for(vari=0;i<30;i++){
varx=Math.sin(i*dig);
vary=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
functiondraw2(id){
varcanvas=document.getElementById(id);
if(canvas==null){
returnfalse;
}
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEFF";
context.fillRect(0,0,400,300);
varn=0;
vardx=150;
vardy=150;
vars=100;
context.beginPath();
context.globalCompositeOperation='and';
context.fillStyle='rgb(100,255,100)';
varx=Math.sin(0);
vary=Math.cos(0);
vardig=Math.PI/15*11;
context.moveTo(dx,dy);
for(vari=0;i<30;i++){
varx=Math.sin(i*dig);
vary=Math.cos(i*dig);
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
functiondraw24(id){
varcanvas=document.getElementById(id);
if(canvas==null){
returnfalse;
}
varcontext=canvas.getContext("2d");
context.moveTo(50,50);
context.bezierCurveTo(50,50,150,50,150,150);
context.stroke();
context.quadraticCurveTo(150,250,250,250);
context.stroke();
}
functiondraw25(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
varg1=context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,'rgb(255,0,0)');//红
g1.addColorStop(0.5,'rgb(0,255,0)');//绿
g1.addColorStop(1,'rgb(0,0,255)');//蓝
//可以把lg对象理解成GDI中线性brush
context.fillStyle=g1;
//再用这个brush来画正方形
context.fillRect(0,0,400,300);
}
functiondraw3(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
varg1=context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,'rgb(255,255,0)');//浅绿
g1.addColorStop(1,'rgb(0,255,255)');//浅蓝
context.fillStyle=g1;
context.fillRect(0,0,400,300);
varn=0;
varg2=context.createLinearGradient(0,0,300,0);
g2.addColorStop(0,'rgba(0,0,255,0.5)');//蓝色
g2.addColorStop(1,'rgba(255,0,0,0.5)');//红色
for(vari=0;i<10;i++){
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
functiondraw26(id){
//同一个圆心画球型
/*varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
varg1=context.createRadialGradient(200,150,0,200,150,100);
g1.addColorStop(0.1,'rgb(255,0,0)');
g1.addColorStop(1,'rgb(50,0,0)');
context.fillStyle=g1;
context.beginPath();
context.arc(200,150,100,0,Math.PI*2,true);
context.closePath();
context.fill();*/
//不同圆心看径向渐变模型
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
varg1=context.createRadialGradient(100,150,10,300,150,50);
g1.addColorStop(0.1,'rgb(255,0,0)');
g1.addColorStop(0.5,'rgb(0,255,0)');
g1.addColorStop(1,'rgb(0,0,255)');
context.fillStyle=g1;
context.fillRect(0,0,400,300);
}
functiondraw27(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowColor='rgba(100,100,100,0.5)';
context.shadowBlur=1.5;
context.fillStyle='rgba(255,0,0,0.5)';
context.fillRect(100,100,200,100);
}
functiondraw4(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
varg1=context.createRadialGradient(400,0,0,400,0,400);
g1.addColorStop(0.1,'rgb(255,255,0)');
g1.addColorStop(0.3,'rgb(255,0,255)');
g1.addColorStop(1,'rgb(0,255,255)');
context.fillStyle=g1;
context.fillRect(0,0,400,300);
varn=0;
//varg2=context.createRadialGradient(250,250,0,250,250,300);
//g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
//g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
//g2.addColorStop(1,'rgba(0,0,255,0.5)');
for(vari=0;i<10;i++){
varg2=context.createRadialGradient(i*25,i*25,0,i*25,i*25,i*10);
g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
g2.addColorStop(1,'rgba(0,0,255,0.5)');
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.fill();
}
}
functiondraw5(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.save();//保存了当前context的状态
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="rgba(255,0,0,0.1)";
//平移缩放旋转123
context.translate(100,100);
context.scale(0.5,0.5);
context.rotate(Math.PI/4);
context.fillRect(0,0,100,100);
context.restore();//恢复到刚刚保存的状态,保存恢复只能使用一次
context.save();//保存了当前context的状态
context.fillStyle="rgba(255,0,0,0.2)";
//平移旋转缩放132
context.translate(100,100);
context.rotate(Math.PI/4);
context.scale(0.5,0.5);
context.fillRect(0,0,100,100);
context.restore();//恢复到刚刚保存的状态
context.save();//保存了当前context的状态
context.fillStyle="rgba(255,0,0,0.3)";
//缩放平移旋转213
context.scale(0.5,0.5);
context.translate(100,100);
context.rotate(Math.PI/4);
context.fillRect(0,0,100,100);
context.restore();//恢复到刚刚保存的状态
context.save();//保存了当前context的状态
context.fillStyle="rgba(255,0,0,0.4)";
//缩放旋转平移231
context.scale(0.5,0.5);
context.rotate(Math.PI/4);
context.translate(100,100);
context.fillRect(0,0,100,100);
context.restore();//恢复到刚刚保存的状态
context.save();//保存了当前context的状态
context.fillStyle="rgba(255,0,0,0.5)";
//旋转平移缩放312
context.rotate(Math.PI/4);
context.translate(100,100);
context.scale(0.5,0.5);
context.fillRect(0,0,100,100);
context.restore();//恢复到刚刚保存的状态
context.save();//保存了当前context的状态
context.fillStyle="rgba(255,0,0,1)";
//旋转缩放平移321
context.rotate(Math.PI/4);
context.scale(0.5,0.5);
context.translate(100,100);
context.fillRect(0,0,100,100);
//实验表明应该移动的是坐标轴
//实验表明缩放的是坐标轴比例
//实验表明旋转的是坐标轴
//综合上述，因此平移缩放旋转三者的顺序不同都将画出不同的结果
}
functiondraw6(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
//图形绘制
context.translate(200,50);
context.fillStyle='rgba(255,0,0,0.25)';
for(vari=0;i<50;i++){
//实验表明translate、scale、rotate都是在原有的context属性上调整的
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
context.fillRect(0,0,100,50);
}
}
functiondraw7(id){
varcanvas=document.getElementById(id);
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
//图形绘制
context.translate(200,50);
for(vari=0;i<50;i++){
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
create5Star(context);
context.fill();
}
}
functiondraw8(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
//context.beginPath();
context.strokeStyle="rgb(250,0,0)";
context.fillStyle="rgb(250,0,0)"
//实验证明第一次lineTo的时候和moveTo功能一样
context.lineTo(100,100);
//之后的lineTo会以上次lineTo的节点为开始
context.lineTo(200,200);
context.lineTo(200,100);
context.moveTo(200,50);
context.lineTo(100,50);
context.stroke();
}
functiondraw9(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
//定义颜色
varcolors=["red","orange","yellow","green","blue","navy","perple"];
//定义线宽
context.lineWidth=10;
context.transform(1,0,0,1,100,0)
//循环绘制圆弧
for(vari=0;i<colors.length;i++){
//定义每次向下移动10个像素的变换矩阵
context.transform(1,0,0,1,0,10);
//设定颜色
context.strokeStyle=colors[i];
context.beginPath();
context.arc(50,100,100,0,Math.PI,true);
context.stroke();
}
}
functiondraw10(id){
varcanvas=document.getElementById(id);
if(canvas==null){
returnfalse;
}
varcontext=canvas.getContext("2d");
varoprtns=newArray(
"source-over",
"destination-over",
"source-in",
"destination-in",
"source-out",
"destination-out",
"source-atop",
"destination-atop",
"lighter",
"xor",
"copy"
);
vari=0;//组合效果编号
//结合setinterval动态显示组合
varinteral=setInterval(function(){
if(i==10){
i=0;
}
else{
i++;
}
//每次重绘前清空
context.clearRect(0,0,400,300)
//蓝色矩形
context.fillStyle="blue";
context.fillRect(10,10,60,60);
//设置组合方式
context.globalCompositeOperation=oprtns[i];
//设置新图形（红色圆形）
context.beginPath();
context.fillStyle="red";
context.arc(60,60,30,0,Math.PI*2,false);
context.fill();
},1000);
}
functioncreate5Star(context){
varn=0;
vardx=100;
vardy=0;
vars=50;
//创建路径
context.beginPath();
context.fillStyle='rgba(255,0,0,0.5)';
varx=Math.sin(0);
vary=Math.cos(0);
vardig=Math.PI/5*4;
for(vari=0;i<5;i++){
varx=Math.sin(i*dig);
vary=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
functiondraw11(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowColor='rgba(100,100,100,0.5)';
context.shadowBlur=5;
//图形绘制
context.translate(0,50);
for(vari=0;i<3;i++){
context.translate(50,50);
create5Star(context);
context.fill();
}
}
//drawImage(image,x,y)
functiondraw28(id){
varimage=newImage();
image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
image.onload=function(){
context.drawImage(image,0,0);
}
}
//drawImage(image,x,y,w,h)
functiondraw12(id){
varimage=newImage();
image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
image.onload=function(){
context.drawImage(image,50,50,300,200);
}
}
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
functiondraw13(id){
varimage=newImage();
image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
image.onload=function(){
context.drawImage(image,100,100,200,150,50,50,300,200);//这里取的是实际尺寸
}
}
functiondraw14(id){
//传统的平铺是用for循环来处理的，现在直接调用接口
varimage=newImage();
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
vartype=["no-repeat","repeat-x","repeat-y","repeat"];
vari=0;
image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload=function(){
varinterval=setInterval(function(){
//每次转换平铺类型清空
context.clearRect(0,0,400,300);
if(i>=4){
i=0;
}
varptrn=context.createPattern(image,type[i]);
context.fillStyle=ptrn;
context.fillRect(0,0,400,300);
i++;
},1000);
};
}
//图像裁剪
functiondraw15(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="black";
context.fillRect(0,0,400,300);
image=newImage();
image.onload=function(){
drawImg(context,image);
}
image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"
}
functiondrawImg(context,image){
//圆形裁剪区
//createCircleClip(context)
//星形裁剪区
create5StarClip(context);
context.drawImage(image,0,0);
}
functioncreateCircleClip(context){
context.beginPath();
context.arc(200,150,100,0,Math.PI*2,true);
context.closePath();
context.clip();
}
functioncreate5StarClip(context){
varn=0;
vardx=200;
vardy=135;
vars=150;
context.beginPath();
varx=Math.sin(0);
vary=Math.cos(0);
vardig=Math.PI/5*4;
for(vari=0;i<5;i++){
varx=Math.sin(i*dig);
vary=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
context.clip();
}
functiondraw16(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle='red'
//在右下角画一个正方形
context.fillRect(250,250,150,50);
varimage=newImage();
image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload=function(){
//在左上角画一幅图片
context.drawImage(image,0,0,200,200);
//实验证明imagedata取的是canvas所在范围画的图形，不止是图片
//不会取该区域内是空白的canvas的像素
varimagedata=context.getImageData(0,0,400,300);
//修改imagedata
for(vari=0,n=imagedata.data.length;i<n;i+=4){
imagedata.data[i+0]=255-imagedata.data[i+0];//red;
imagedata.data[i+1]=255-imagedata.data[i+1];//green
imagedata.data[i+2]=255-imagedata.data[i+2];//blue
//imagedata.data[i+3]=255-imagedata.data[i+3];//a
}
context.putImageData(imagedata,0,0,100,100,300,200);
}
}
functiondraw17(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="#00f";
context.font="italic30pxsans-serif";
context.textBaseline='top';
//填充字符串
vartxt="fill示例文字"
context.fillText(txt,0,0);
varlength=context.measureText(txt);
context.fillText("长"+length.width+"px",0,50);
context.font="bolid30pxsans-serif";
txt="stroke示例文字";
length=context.measureText(txt);
context.strokeText(txt,0,100);
context.fillText("长"+length.width+"px",0,150);
}
functiondraw18(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="red";
context.save();//保存了当前context的状态
context.fillStyle="black";
context.fillRect(0,0,100,100);
context.restore();//恢复到刚刚保存的状态
context.fillRect(0,120,100,100);
}
functiondraw19(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(0,0,225)";
context.fillRect(0,0,canvas.width,canvas.height);
context.fillStyle="rgb(255,255,0)";
context.fillRect(10,20,50,50);
//把图像保存到新的窗口
varw=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");
}
functiondraw20(id){
varcanvas=document.getElementById(id);
if(canvas==null)
returnfalse;
varcontext=canvas.getContext("2d");
varinteral=setInterval(function(){
move(context);
},1);
}
varx=100;//矩形开始坐标
vary=100;//矩形结束坐标
varmx=0;//0右1左
varmy=0;//0下1上
varml=1;//每次移动长度
varw=20;//矩形宽度
varh=20;//矩形高度
varcw=400;//canvas宽度
varch=300;//canvas高度
functionmove(context){
context.clearRect(0,0,400,300);
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="red";
context.fillRect(x,y,w,h);
if(mx==0){
x=x+ml;
if(x>=cw-w){
mx=1;
}
}
else{
x=x-ml;
if(x<=0){
mx=0;
}
}
if(my==0){
y=y+ml;
if(y>=ch-h){
my=1;
}
}
else{
y=y-ml;
if(y<=0){
my=0;
}
}
}
window.onload=function(){
draw21("canvas21");
draw22("canvas22");
draw23("canvas23");
draw24("canvas24");
draw25("canvas25");
draw26("canvas26");
draw27("canvas27");
draw28("canvas28");
draw0("canvas0");
draw1("canvas1");
draw2("canvas2");
draw3("canvas3");
draw4("canvas4");
draw5("canvas5");
draw6("canvas6");
draw8("canvas8");
draw7("canvas7");
draw9("canvas9");
draw10("canvas10");
draw11("canvas11");
draw12("canvas12");
draw13("canvas13");
draw14("canvas14");
draw15("canvas15");
draw16("canvas16");
draw17("canvas17");
draw18("canvas18");
draw19("canvas19");
draw20("canvas20");
}
</script>
</head>
<body>
<section><header><h1>画矩形</h1></header><canvasid="canvas21"width="400"height="300"></canvas></section>
<section><header><h1>清除矩形</h1></header><canvasid="canvas22"width="400"height="300"></canvas></section>
<section><header><h1>绘制路径</h1></header><canvasid="canvas23"width="400"height="300"></canvas></section>
<section><header><h1>画圆()</h1></header><canvasid="canvas0"width="400"height="300"></canvas></section>
<section><header><h1>画线test(lineTomoveTo)</h1></header><canvasid="canvas8"width="400"height="300"></canvas></section>
<section><header><h1>画线demo(lineTomoveTo)</h1></header><canvasid="canvas1"width="400"height="300"></canvas></section>
<section><header><h1>贝塞尔曲线test（bezierCurveTo）</h1></header><canvasid="canvas24"width="400"height="300"></canvas></section>
<section><header><h1>贝塞尔曲线demo（bezierCurveTo）</h1></header><canvasid="canvas2"width="400"height="300"></canvas></section>
<section><header><h1>线性test（createLinearGradientaddColorStop）</h1></header><canvasid="canvas25"width="400"height="300"></canvas></section>
<section><header><h1>线性demo（createLinearGradientaddColorStop）</h1></header><canvasid="canvas3"width="400"height="300"></canvas></section>
<section><header><h1>发散test（createRadialGradient）</h1></header><canvasid="canvas26"width="400"height="300"></canvas></section>
<section><header><h1>发散demo（createRadialGradient）</h1></header><canvasid="canvas4"width="400"height="300"></canvas></section>
<section><header><h1>平移test（translate）缩放（scale）旋转（rotate）</h1></header><canvasid="canvas5"width="400"height="300"></canvas></section>
<section><header><h1>平移demo（translate）缩放（scale）旋转（rotate）</h1></header><canvasid="canvas6"width="400"height="300"></canvas></section>
<section><header><h1>坐标与路径的结合使用</h1></header><canvasid="canvas7"width="400"height="300"></canvas></section>
<section><header><h1>矩阵变换</h1></header><canvasid="canvas9"width="400"height="300"></canvas></section>
<section><header><h1>图形组合叠加(globalCompositeOperation)</h1></header><canvasid="canvas10"width="400"height="300"></canvas></section>
<section><header><h1>给图像绘制阴影testshadowOffsetX(阴影的横向位移量)shadowOffsetY(盈盈的纵向位移量)shadowColor（阴影的颜色）shadowBlur（阴影的模糊范围）</h1></header><canvasid="canvas27"width="400"height="300"></canvas></section>
<section><header><h1>给图像绘制阴影demoshadowOffsetX(阴影的横向位移量)shadowOffsetY(盈盈的纵向位移量)shadowColor（阴影的颜色）shadowBlur（阴影的模糊范围）</h1></header><canvasid="canvas11"width="400"height="300"></canvas></section>
<section><header><h1>绘制图像drawImage(image,x,y)</h1></header><canvasid="canvas28"width="400"height="300"></canvas></section>
<section><header><h1>绘制图像drawImage(image,x,y,w,h)</h1></header><canvasid="canvas12"width="400"height="300"></canvas></section>
<section><header><h1>绘制局部图像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h1></header><canvasid="canvas13"width="400"height="300"></canvas></section>
<section><header><h1>图像平铺</h1></header><canvasid="canvas14"width="400"height="300"></canvas></section>
<section><header><h1>图像裁剪clip</h1></header><canvasid="canvas15"width="400"height="300"></canvas></section>
<section><header><h1>像素处理getImageData</h1></header><canvasid="canvas16"width="400"height="300"></canvas></section>
<section><header><h1>绘制文字fillTextstrokeText</h1></header><canvasid="canvas17"width="400"height="300"></canvas></section>
<section><header><h1>绘图状态的保存save与恢复restore</h1></header><canvasid="canvas18"width="400"height="300"></canvas></section>
<section><header><h1>保存文件canvas.toDataURL</h1></header><canvasid="canvas19"width="400"height="300"></canvas></section>
<section><header><h1>简单动画</h1></header><canvasid="canvas20"width="400"height="300"></canvas></section>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！