一 位图裁剪方法
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>
三 运行结果
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
