Canvas 位图裁剪

川长思鸟来 2022-05-12 00:40 183阅读 0赞

**一 位图裁剪方法**

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>

** **

**三 运行结果**

![c7afe3f2-ec9b-3951-b4b7-1b0d8d918645.png][]

[c7afe3f2-ec9b-3951-b4b7-1b0d8d918645.png]: /images/20220512/438f67e34a084fd393cb23bb76113e40.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas裁剪图片尺寸问题

人见解，欢迎大家一起交流学习n(\*≧▽≦\*)n ![20190912171245823.gif][] 得到原始的图片尺寸 let myImage = d...

谁践踏了优雅/ 2024年04月18日 22:21/ 0 赞/ 59 阅读

相关 web功能实例 - Canvas裁剪工具

嗯,手撸官方文档2天，发现没啥用，尤其是动画,那种计算出来的，根本想不到。因此学着学了抱着要做个东西的想法,去网上找相关案例,最终做出了这个裁剪工具。![77007155bee

淡淡的烟草味﹌/ 2024年02月05日 19:02/ 0 赞/ 43 阅读

相关 Android画布Canvas裁剪clipRect，Kotlin

Android画布Canvas裁剪clipRect，Kotlin private fun mydraw() { val origi

傷城~/ 2024年02月05日 18:05/ 0 赞/ 46 阅读

相关 canvas详解07-裁剪

裁切路径 ![a071f2b37c18cf45aea4b9ac75430994.png][] 裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐

秒速五厘米/ 2023年10月12日 19:55/ 0 赞/ 32 阅读

相关 OPENGL—编码裁剪（Cohen-Sutherland）法裁剪图

//编码裁剪（Cohen-Sutherland）法裁剪图 include"stdafx.h" include<Gl/glut.h> includ

红太狼/ 2022年06月15日 11:29/ 0 赞/ 222 阅读

相关 Canvas 输出位图

一介绍 toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。 dataURL是将数据按base64进行编码，它是一种保存二进制的方式

- 日理万妓/ 2022年05月12日 00:40/ 0 赞/ 166 阅读

相关 Canvas 位图裁剪

一位图裁剪方法 1、将需要从位图上裁剪的部分定义成Canvas的路径。 2、调用CanvasRenderingContext2D的的clip（）方法把路径剪切出来。 3

川长思鸟来/ 2022年05月12日 00:40/ 0 赞/ 184 阅读

相关 Canvas 位图填充

一位图填充方法 1、调用createPattern方法创建位图填充，该方法返回一个CanvasPattern对象。 2、将CanvasPattern对象赋值给Canvas

谁践踏了优雅/ 2022年05月12日 00:38/ 0 赞/ 252 阅读

相关 canvas反向裁剪技巧

我们都知道在canvas 可以通过clip来实现剪裁功能，其步骤一般是先设置要裁剪的区域（路径），然后通过ctx.clip()的实现裁剪，裁剪之后，后续的绘制只能在裁剪的区域显

缺乏、安全感/ 2022年03月07日 05:38/ 0 赞/ 205 阅读

相关 canvas反向裁剪技巧

我们都知道在canvas 可以通过clip来实现剪裁功能，其步骤一般是先设置要裁剪的区域（路径），然后通过ctx.clip()的实现裁剪，裁剪之后，后续的绘制只能在裁剪的区域显

小鱼儿/ 2021年09月18日 12:22/ 0 赞/ 360 阅读