一 位图裁剪方法
1、将需要从位图上裁剪的部分定义成Canvas的路径。
2、调用CanvasRenderingContext2D的的clip()方法把路径剪切出来。
3、绘制位图——此时只要被clip()的路径覆盖的部分才会被显示出来。
二 代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 位图裁剪 </title> </head> <body> <h2> 位图裁剪 </h2> <canvas id="mc" width="400" height="260" style="border:1px solid black"></canvas> <script type="text/javascript"> // 获取canvas元素对应的DOM对象 var canvas = document.getElementById('mc'); // 获取在canvas上绘图的CanvasRenderingContext2D对象 var ctx = canvas.getContext('2d'); var dig = Math.PI / 20 ; var count = 0; var image = new Image(); image.src = "android.png"; image.onload = function() { // 指定每隔0.15秒调用一次addRadial函数 setInterval("addRadial();" , 150); } var addRadial = function() { // 保存当前的绘图状态 ctx.save(); // 开始创建路径 ctx.beginPath(); // 添加一段圆弧 ctx.arc(200 , 130 , 200 , 0 , dig * ++count , false); // 让圆弧连接到圆心 ctx.lineTo(200 , 130); // 关闭路径 ctx.closePath(); // 剪切路径 ctx.clip(); // 此时绘制的图片只有路径覆盖的部分才会显示出来 ctx.drawImage(image , 124 , 20); ctx.restore(); } </script> </body> </html>
三 运行结果