Canvas 位图裁剪

最新推荐文章于 2024-08-10 11:53:46 发布

最新推荐文章于 2024-08-10 11:53:46 发布 · 144 阅读

文章标签：

#Canvas #位图裁剪

HTML5 专栏收录该内容

14 篇文章

订阅专栏

一位图裁剪方法

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>

三运行结果