xxxxxxxxxx<html><head><meta charset="utf-8"><title>W3Cschool教程(w3cschool.cn)</title></head><body><span>没有进行clip():</span><canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// 画一个矩形ctx.rect(50,20,200,120);ctx.stroke();// 画一个红色矩形ctx.fillStyle="red";ctx.fillRect(0,0,150,100);</script> <span>有进行clip():</span><canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas2");var ctx=c.getContext("2d");//剪切一个矩形区域ctx.rect(50,20,200,120);ctx.stroke();ctx.clip();//剪切之后画一个矩形ctx.fillStyle="red";ctx.fillRect(0,0,150,100);</script> </body></html>