绘制基本的图形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>canvas</title></head><body><h1>画布</h1> <canvas id="myCanvas" style="border:1px solid #ff0" width="200" height="100" > Your Browser does not support Canvas, please upgrade</canvas><dl> <dt><h1>绘制图形的步骤</h1></dt> <dd> <ol> <li>第一步，创建一个带id的canvas元素</li> <li>第二步，通过id获取canvas，document.getElementById(id)</li> <li>第三步，创建Context对象，创造2D环境</li> </ol> <canvas id="myCanvas1" style="border:1px solid #ff0" width="200" height="100"> </canvas> </dd></dl><dl> <dt><h1>绘制直线</h1></dt> <dd> <ol> <li>第一步，使用moveTo定起点</li> <li>第二步，使用lineTo定终点</li> <li>第三步，使用stroke花线</li> </ol> <canvas id="myCanvas2" style="border:1px solid #ff0" width="200" height="100"> 您的浏览器不支持 </canvas> </dd></dl><dl> <dt><h1>绘制矩形</h1></dt> <dd> <ol> <li>第一种方法，使用fill填充，用到的fillStyle和fillRect</li> <li>第二种方法，使用stroke绘制轮廓，用到的strokeStyle和strokeRect</li> </ol> </dd> <canvas id="myCanvas3" style="border:1px solid #ff0" width="200" height="100"> 你的浏览器支持，请更新浏览器 </canvas></dl><dl> <dt><h1>绘制圆形</h1></dt> <dd> <ol> <li>用到了beginPath(),closePath(),arc(x,y,radius,startAngle,endAngle,是否按顺时针)，fill方法</li> <li>fill是用来填充图形的；stroke是画轮廓</li> </ol> <canvas id="myCanvas4" style="border:1px solid #ff0"> </canvas> </dd></dl><dl> <dt><h1>绘制弧形</h1></dt> <dd> <ol> <li>使用的方法就是arc(x,y,radius,startAngle,endAngle,是否按顺时针)</li> </ol> </dd> <canvas id="myCanvas5" style="border:1px solid #ff0">Your Browser does not support Canvas, please upgrade</canvas></dl><dl> <dt><h1>绘制三角形</h1></dt> <dd> <ol> <li>fill是填充型；stroke是轮廓型;</li> </ol> <canvas id="myCanvas6" style="border:1px solid #ff0"> </canvas> </dd></dl><dl> <dt><h1>清空画布</h1></dt> <dd> <ol> <li>使用clearRect(x,y,w,h)清空指定的画布</li> </ol> <canvas id="myCanvas7" style="border:1px solid #ff0"> 可以清空的画布 </canvas> <button type="button" onclick="clearMap()">清空上面的画布</button> </dd></dl><script type="text/javascript">// 绘制矩形var c=document.getElementById("myCanvas1");var context=c.getContext("2d");context.fillStyle="#ff00ff";context.fillRect(50, 25, 100, 50);// 绘制直线var c1=document.getElementById("myCanvas2");var context1=c1.getContext("2d");context1.moveTo(0, 0);context1.lineTo(200,100);context1.stroke();// 绘制矩形--填充var c2=document.getElementById("myCanvas3");var context2=c2.getContext("2d");context2.fillStyle="#ff00ff";context2.fillRect(0, 0, 200, 100);//绘制矩形-轮廓context2.strokeStyle="#fff";context2.strokeRect(0,0,100,50);// 绘制圆形--填充var c3=document.getElementById("myCanvas4");var context3=c3.getContext("2d");context3.fillStyle="#ff00ff";context3.beginPath();context3.arc(100, 75, 50, 0, Math.PI*2, true);context3.closePath();context3.fill();// 绘制圆形--轮廓context3.strokeStyle="#ff0";context3.beginPath();context3.arc(100, 75, 30,0,Math.PI*2, true);context3.stroke();// 绘制弧线var c5=document.getElementById("myCanvas5");var context5=c5.getContext("2d");for (var i = 0; i<5; i++) { context5.strokeStyle="#ff00ff"; context5.beginPath(); context5.arc(0, 150, i*10, 0, Math.PI*3/2, true); context5.stroke();}// 绘制三角形--填充型var c6 = document.getElementById("myCanvas6");var context6=c6.getContext("2d");context6.fillStyle="#ff00ff";context6.beginPath();context6.moveTo(25, 25);context6.lineTo(150,25);context6.lineTo(25,150);context6.closePath();context6.fill();// 绘制三角形-轮廓型context6.strokeStyle="#ff0";context6.beginPath();context6.moveTo(30, 30);context6.lineTo(120,30);context6.lineTo(30,120);context6.closePath();context6.stroke();// 测试清空画布var c7=document.getElementById("myCanvas7");var context7=c7.getContext("2d");context7.beginPath();context7.arc(150, 150, 100, -Math.PI*1/6, -Math.PI*5/6, true);context7.stroke();// 清空画布function clearMap(){ context7.clearRect(0,0,300,150);}</script></body></html>
绘制贝塞尔曲线：
<dl> <dt><h1>绘制二次贝塞尔曲线</h1></dt> <dd> <ol> <li>quadraticCurveTo(cp1x,cp1y,x,y),cp1x,cp1y为控制点的坐标，x,y为终点坐标；</li> </ol> </dd> <canvas id="myCanvas8" style="border:1px solid #ff0" width="300" height="200"> </canvas></dl><dl> <dt><h1>绘制三次贝塞尔曲线</h1></dt> <dd> <ol> <li>bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);cp1x,cp1y是第一个控制点的坐标；cp2x,cp2y是第二个坐标的控制点</li> </ol> <canvas id="myCanvas9" style="border:1px solid #ff0" width="300" height="200"> </canvas> </dd></dl>// 绘制贝塞尔曲线var c8 = document.getElementById("myCanvas8");var context8=c8.getContext("2d");context8.strokeStyle="#ff00ff";context8.beginPath();context8.moveTo(0, 200);context8.quadraticCurveTo(75, 50, 300, 200);context8.stroke();context8.globalCompositeOperation="source-over";// 绘制三次贝塞尔曲线var c9=document.getElementById("myCanvas9");var context9=c9.getContext("2d");context9.strokeStyle="#ff0";context9.beginPath();context9.moveTo(0, 200);context9.bezierCurveTo(25,50,75,50,300,200);context9.stroke();context9.globalCompositeOperation="source-over";
图形的变化---保存与恢复canvas状态
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>图形的变换</title></head><body> <dl> <dt><h1>保存与恢复Canvas状态</h1></dt> <dd> <ol> <li>save() :保存canvas的状态到堆中</li> <li>restore:从堆中恢复canvas的状态</li> </ol> <canvas id="myCanvas1" style="border: 1px solid #ff0;" width="300" height="200"> </canvas> </dd> </dl></body><script type="text/javascript"> // 保存和恢复canvas var c1=document.getElementById("myCanvas1"); var context1=c1.getContext("2d"); // 绘制一个矩形 context1.fillStyle="#ff00ff"; context1.strokeStyle="red"; context1.fillRect(20, 20, 100, 100); context1.strokeRect(20,20,100,100); context1.fill(); context1.stroke(); // 保存当前的状态context1.save(); // 绘制另外一个矩形 context1.fillStyle="#f00"; context1.strokeStyle="green"; context1.fillRect(140, 20, 100, 100); context1.fillRect(140, 20, 100, 100); context1.fill(); context1.stroke(); //恢复第一个矩形的状态context1.restore(); //绘制两个矩形 context1.fillRect(20, 140, 50, 50); context1.strokeRect(80,140,50,50); </script></html>
图形的变化---移动坐标空间
<dl>
<dt><h1>移动坐标空间</h1></dt>
<dd>
<ol>
<li>context.translate(dx,dy),dx和dy分变为水平和垂直的便宜量</li>
<li>注意：移动之前会先保存画布</li>
</ol>
</dd>
</dl>
<canvas id="myCanvas1" style="border:1px solid #ff0" width="300" height="200">
1. </canvas>
var ctx1=document.getElementById("myCanvas1").getContext("2d"); ctx1.translate(50,50); ctx1.fillStyle="#ff0"; ctx1.fillRect(0, 0, 100, 100);
效果
图形的变化--旋转坐标空间：
<dl> <dt><h1>旋转坐标空间</h1></dt> <dd> <ol> <li>方法是rotate(angle)</li> <li>以原点为中心旋转，顺时针为正，选装的是canvas</li> </ol> <canvas id="myCanvas2" style="border:1px solid #ff0" width="700" height="300"></canvas> </dd></dl> // 旋转坐标空间 var ctx2=document.getElementById("myCanvas2").getContext("2d"); ctx2.save(); ctx2.rotate(Math.PI*1/4); ctx2.fillStyle="#ff00ff"; ctx2.fillRect(0, 0, 100, 100); ctx2.restore();
图形的变化--缩放图形：
<dl> <dt><h1>缩放图形</h1></dt> <dd> <ol> <li>方法scale(x,y)</li> <li>大于1的值是放大，小于1的值是缩小</li> </ol> <canvas id="myCanvas3" style="border:1px solid #ff0" width="700" height="300"> </canvas> </dd></dl>
1. // 缩放图形
var ctx3=document.getElementById("myCanvas3").getContext("2d"); ctx3.save(); ctx3.fillStyle="#ff00ff"; ctx3.scale(1.9,1.1); ctx3.fillRect(100, 100, 100, 100); ctx3.restore();
结果：
图形的变化--矩阵的变换：
• 可以实现平移，旋转，缩放，切变和镜像反射
• 方法：context.transform(m11x,m12y,m21x,m22y,dx,dy);写成矩阵是
• 矩阵变换后：x`=m11x+m21y+dx; y`=m12x+m22y+dy;
• 移动的矩阵：（1,0,0,1，dx,dy）; (0,1,1,0,dx,dy);
• 缩放的矩阵：（m11,0,0,m22,0,0）;(0,m12,m21,0,0,0);
• 旋转：（cos0,sin0,-sin0,cose0,0,0）;
• 将当前的矩阵变换为最初的矩阵：setTransform(m11,m12,m21,m22,dx,dy),会先重置再变换
图形的组合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>图形的组合</title></head><body> <dl> <dt><h1>图形的组合</h1></dt> <dd> <ol> <li>globalCompositeOperation，指定它的值，来改变图形的绘制顺序和绘制方式</li> <li>globalAlpha,指定图形的透明度</li> <li>次法放老图形和新图形的中间</li> </ol> </dd> </dl> <dl> <dt><h1>source-over 默认值</h1></dt> <dd> <ol> <li>新的图形覆盖在原图形上,默认值，source-over</li> </ol> <canvas id="myCanvas1" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>destination-over</h1></dt> <dd> <ol> <li>原有的图形覆盖在新的图形之上</li> </ol> <canvas id="myCanvas2" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>source-atop</h1></dt> <dd> <ol> <li>只是绘制原有的内容+重叠部分，且新在原上</li> </ol> <canvas id="myCanvas3" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>destination-atop</h1></dt> <dd> <ol> <li>只是绘制原有的内容+重叠部分，且原在新的上面</li> </ol> <canvas id="myCanvas4" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>source-in</h1></dt> <dd> <ol> <li>重叠部分,且新在上</li> </ol> <canvas id="myCanvas5" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>destination-in</h1></dt> <dd> <ol> <li>重叠部分,且原在上</li> </ol> <canvas id="myCanvas6" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>source-out</h1></dt> <dd> <ol> <li>新图形-重叠部分</li> </ol> <canvas id="myCanvas7" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>destination-out</h1></dt> <dd> <ol> <li>原图形-重叠部分</li> </ol> <canvas id="myCanvas8" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>lighter</h1></dt> <dd> <ol> <li>都显示，重叠部分加色处理</li> </ol> <canvas id="myCanvas9" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>darker</h1></dt> <dd> <ol> <li>都显示，重叠部分减色处理</li> </ol> <canvas id="myCanvas10" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>copy</h1></dt> <dd> <ol> <li>只保留新图形</li> </ol> <canvas id="myCanvas11" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>xor</h1></dt> <dd> <ol> <li>重叠的部分变为透明</li> </ol> <canvas id="myCanvas12" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> <dt><h1>globalAlpha</h1></dt> <dd> <ol> <li>指定图像的透明度</li> </ol> <canvas id="myCanvas13" style="border: 1px solid #ff0;" height="200"> </canvas> </dd> </dl> <script type="text/javascript"> // source-over 默认值 var ctx1=document.getElementById("myCanvas1").getContext("2d"); ctx1.fillStyle="red"; ctx1.fillRect(50, 50, 100, 100); ctx1.globalCompositeOperation="source-over"; ctx1.fillStyle="blue"; ctx1.beginPath(); ctx1.arc(150, 125, 50, 0, Math.PI*2, true); ctx1.closePath(); ctx1.fill(); // destination-over 原有的图形覆盖在新图形上 var ctx2=document.getElementById("myCanvas2").getContext("2d"); ctx2.fillStyle="red"; ctx2.fillRect(50, 50, 100, 100); ctx2.globalCompositeOperation="destination-over"; ctx2.fillStyle="blue"; ctx2.beginPath(); ctx2.arc(150, 125, 50, 0, Math.PI*2, true); ctx2.closePath(); ctx2.fill(); // source-atop var ctx3=document.getElementById("myCanvas3").getContext("2d"); ctx3.fillStyle="red"; ctx3.fillRect(50, 50, 100, 100); ctx3.globalCompositeOperation="source-atop"; ctx3.fillStyle="blue"; ctx3.beginPath(); ctx3.arc(150, 125, 50, 0, Math.PI*2, true); ctx3.closePath(); ctx3.fill(); // destination-atop var ctx4=document.getElementById("myCanvas4").getContext("2d"); ctx4.fillStyle="red"; ctx4.fillRect(50, 50, 100, 100); ctx4.globalCompositeOperation="destination-atop"; ctx4.fillStyle="blue"; ctx4.beginPath(); ctx4.arc(150, 125, 50, 0, Math.PI*2, true); ctx4.closePath(); ctx4.fill(); // source-in var ctx5=document.getElementById("myCanvas5").getContext("2d"); ctx5.fillStyle="red"; ctx5.fillRect(50, 50, 100, 100); ctx5.globalCompositeOperation="source-in"; ctx5.fillStyle="blue"; ctx5.beginPath(); ctx5.arc(150, 125, 50, 0, Math.PI*2, true); ctx5.closePath(); ctx5.fill(); // source-in var ctx6=document.getElementById("myCanvas6").getContext("2d"); ctx6.fillStyle="red"; ctx6.fillRect(50, 50, 100, 100); ctx6.globalCompositeOperation="destination-in"; ctx6.fillStyle="blue"; ctx6.beginPath(); ctx6.arc(150, 125, 50, 0, Math.PI*2, true); ctx6.closePath(); ctx6.fill(); // source-out var ctx7=document.getElementById("myCanvas7").getContext("2d"); ctx7.fillStyle="red"; ctx7.fillRect(50, 50, 100, 100); ctx7.globalCompositeOperation="source-out"; ctx7.fillStyle="blue"; ctx7.beginPath(); ctx7.arc(150, 125, 50, 0, Math.PI*2, true); ctx7.closePath(); ctx7.fill(); // destination-out var ctx8=document.getElementById("myCanvas8").getContext("2d"); ctx8.fillStyle="red"; ctx8.fillRect(50, 50, 100, 100); ctx8.globalCompositeOperation="destination-out"; ctx8.fillStyle="blue"; ctx8.beginPath(); ctx8.arc(150, 125, 50, 0, Math.PI*2, true); ctx8.closePath(); ctx8.fill(); // lighter var ctx9=document.getElementById("myCanvas9").getContext("2d"); ctx9.fillStyle="red"; ctx9.fillRect(50, 50, 100, 100); ctx9.globalCompositeOperation="lighter"; ctx9.fillStyle="blue"; ctx9.beginPath(); ctx9.arc(150, 125, 50, 0, Math.PI*2, true); ctx9.closePath(); ctx9.fill(); // darker var ctx10=document.getElementById("myCanvas10").getContext("2d"); ctx10.fillStyle="red"; ctx10.fillRect(50, 50, 100, 100); ctx10.globalCompositeOperation="darker"; ctx10.fillStyle="blue"; ctx10.beginPath(); ctx10.arc(150, 125, 50, 0, Math.PI*2, true); ctx10.closePath(); ctx10.fill(); // copy var ctx11=document.getElementById("myCanvas11").getContext("2d"); ctx11.fillStyle="red"; ctx11.fillRect(50, 50, 100, 100); ctx11.globalCompositeOperation="copy"; ctx11.fillStyle="blue"; ctx11.beginPath(); ctx11.arc(150, 125, 50, 0, Math.PI*2, true); ctx11.closePath(); ctx11.fill(); // xor var ctx12=document.getElementById("myCanvas12").getContext("2d"); ctx12.fillStyle="red"; ctx12.fillRect(50, 50, 100, 100); ctx12.globalCompositeOperation="xor"; ctx12.fillStyle="blue"; ctx12.beginPath(); ctx12.arc(150, 125, 50, 0, Math.PI*2, true); ctx12.closePath(); ctx12.fill(); // globalAlpha var ctx13=document.getElementById("myCanvas13").getContext("2d"); ctx13.fillStyle="red"; ctx13.fillRect(50, 50, 100, 100); ctx13.globalAlpha="0.5"; ctx13.fillStyle="blue"; ctx13.beginPath(); ctx13.arc(150, 125, 50, 0, Math.PI*2, true); ctx13.closePath(); ctx13.fill(); </script></body></html>
图形的裁切
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>图形的裁切</title></head><body> <dl> <dt> <h1>图形的裁切</h1> </dt> <dd> <ol> <li>clip</li> <li>原理是给图形蒙一层蒙版，没有被蒙住的，会被隐藏</li> <canvas id="myCanvas" style="border: 1px solid #ff0;" height="300"> </canvas> </ol> </dd> </dl> <script type="text/javascript"> var ctx=document.getElementById("myCanvas").getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0, 0, 300, 300); ctx.fill(); // 绘制圆形 ctx.beginPath(); ctx.arc(150, 150, 100, 0 , Math.PI*2 , true); // 裁切路径 ctx.clip(); ctx.fillStyle="red"; ctx.fillRect(50,50,150 , 150); </script></body></html>
线型的选择
• lineWidth：设置线条的粗细，默认值为1；
• lineCap:设置端点的样式，butt(平头)、round(圆头)、square(方头)；
• lineJoin:设置连接处样式，round(圆头)、bevel(斜平面)、miter(直头)默认；
• miterLimit:设置绘制交点的方式，给斜面长度设置一个上限，默认为10，当斜面长度超过线条宽度的10倍的时候，就会变成斜角。只是适用于miter。
绘制渐变
• 线性渐变：
• 方法：createLinearGradient(x1,y1,x2,y2), 其中（x1,y1）是起点，（x2,y2）是终点；
• addColorStop(position,color):position是0~1的浮点；
• 径向渐变：
• 方法：createRadialGradient(x1,y1,r1,x2,y2,r2);
• addColorStop(position,color),position的值是0~1
// 线性渐变 var ctx1=document.getElementById("myCanvas1").getContext("2d"); var lingrad=ctx1.createLinearGradient(0,0,0,200); lingrad.addColorStop(1/7,'#ff0000'); lingrad.addColorStop(2/7,'#ff9900'); lingrad.addColorStop(3/7,'#00ff00'); lingrad.addColorStop(4/7,'#00ffff'); lingrad.addColorStop(5/7,'#0000ff'); lingrad.addColorStop(6/7,'#ff00ff'); lingrad.addColorStop(1,'#ff0000'); ctx1.fillStyle=lingrad; ctx1.strokeStyle=lingrad; ctx1.fillRect(10,10,200,200);
绘制图案：
• createPattern(img,type),type是类型，有repeat,repeat-x,repeat-y,no-repeat
• 注意：先有pattern对象，然后设置fillStyle
• 可以是img或者canvas
<dt><h1>绘制图案</h1></dt> <dd> <ol> <li>createPattern(img,type),type是类型，有repeat,repeat-x,repeat-y,no-repeat</li> <li>注意：先有pattern对象，然后设置fillStyle</li> </ol> <canvas id="myCanvas3" width="600" height="300" style="border: 1px solid #ff0;"> </canvas> </dd> //绘制图案 var ctx3=document.getElementById("myCanvas3").getContext("2d"); var img=new Image(); img.src="banner-ilvcrp.png"; img.onload=function(){ var ptrn=ctx3.createPattern(img,'repeat'); ctx3.fillStyle=ptrn; ctx3.fillRect(0,0,600,300); }
创建阴影：
• 用到四个属性：
• ctx.shadowOffsetX=float;
• ctx.shadowOffsetY=float;
• ctx.shadowBlur=flaot;
• ctx.shadowColor=color;
<dt><h1>创阴影建</h1></dt> <dd> <ol> <li>shadowOffsetX</li> <li>shadowOffsetY</li> <li>shadowBlur</li> <li>shadowColor</li> </ol> <canvas id="myCanvas4" width="600" height="300" style="border: 1px solid #ff0;"> </canvas> </dd>//创建阴影 var ctx4=document.getElementById("myCanvas4").getContext("2d"); // 设置阴影 ctx4.shadowOffsetX=3; ctx4.shadowOffset=3; ctx4.shadowBlur=2; ctx4.shadowColor="rgba(0,0,0,.5)"; // 绘制矩形 ctx4.fillStyle="#33ccff"; ctx4.fillRect(20, 20, 300, 60); ctx4.fill();
绘制文字：
• 填充文字：ctx.fillText(text,x,y,[maxW]),maxW是显示文字时候的最大的宽度，超过最大的宽度，字儿会变瘦；
• 绘制文字的轮廓：ctx.strokeText(text,x,y,[maxW])
• 文字的相关属性：
• font:
• textAlign：left/right/center/start/end
• textBaseline:top/middle/bottom/
• 测量文字的宽度：measureText(text);
<dt><h1>绘制文字</h1></dt> <dd> <canvas id="myCanvas5" width="350" height="200" style="border: 1px solid #ff0;"> </canvas> </dd> // 绘制文字 var ctx5=document.getElementById("myCanvas5").getContext("2d"); ctx5.font="italic 35px 黑体"; ctx5.fillStyle="red"; ctx5.fillText("绘制填充文字",30,60,200); ctx5.strokeStyle="blue"; ctx5.strokeText("绘制轮廓文字",30,120,200); // 测量文字的宽度 var txt1="我是要测量宽度的文字"; ctx5.fillText(txt1,30,140); var mtxt1=ctx5.measureText(txt1); ctx5.fillText(mtxt1.width,160,80);
操作和使用图像：
- 引入图像：ctx.drawImage(img,x,y);
- 改变图像大小：ctx.drawImage(img,x,y,w,h);
- 创建图像切片：ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)，
- sx,sy:指得是被原图的被裁切区域的起始位置
- sw,sh:指得是被裁切的宽度和高度
- dx,dy:在画布上显示的位置
- dw,wh:在画布上显示的宽和高
- 注意：为了实现图片预加载，先创建img，然后使用onload方法，最后指定url
// 引入图像 var ctx6=document.getElementById("myCanvas6").getContext("2d"); var img=new Image(); img.onload=function(){ //这样可以实现预加载 ctx6.drawImage(img,0,0); }; img.src='banner-ilvcrp.png'; // 改变图像大小 var ctx7=document.getElementById("myCanvas7").getContext("2d"); var img=new Image(); img.onload=function(){ //这样可以实现预加载 ctx7.drawImage(img,0,0,300,100); }; img.src='banner-ilvcrp.png'; // 创建图像切片 var ctx8=document.getElementById("myCanvas8").getContext("2d"); var img=new Image(); img.onload=function(){ //这样可以实现预加载 ctx8.drawImage(img,0,0,300,200,0,0,400,300); }; img.src='banner-ilvcrp.png';本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
