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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!