Canvas 位图裁剪

来源：互联网发布：记录工作时间的软件编辑：程序博客网时间：2024/06/03 16:22

一位图裁剪方法

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>

三运行结果

查看图片附件

0 0