之前发现在网上无法找到相关的内容，找的内容测试也发现有bug。遂，整理思路，自己研究一个可以实现效果的功能。

具体思路就是：首先获取到图片的资源，如果使用img加载的，那一定要等img触发onload以后处理。
我使用的图片是等宽高的图片，获取到图片资源以后，额外的创建一个canvas，将图像使用drawImage方法画到画布上，我们在这个canvas上面处理图像。通过canvas对象的context的createPattern创建一个pattern对象。这个对象不但可以实现重复图像，还可以将我们需要图像资源保存下来，并且赋值给填充对象fillStyle。
创建好pattern对象后，我们就可以使用clearRect方法，将画布清空。
然后，进行画圆操作，使用context的arc方法画圆。
最后，调用fill方法填充即可。

简单的案例代码：

ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
ctx.clearRect(0, 0, num, num);
ctx.arc(r, r, r, 0, Math.PI * 2);
ctx.fill();canvasCtx.drawImage(pixelCanvas, x - r, y - r, num, num);

由于急着下班，就没有单独写案例，从项目里面把代码拷贝出来显示一下。
重点就是需要创建一个额外处理图像的canvas，处理好以后就可以将这个canvas的数据使用drawImage方法放到你的canvas里面了。

完整案例代码

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas画布实现圆形图片</title>
</head>
<body>
<canvas id="canvas" style="margin: 0 auto; display: block;"></canvas>
<canvas id="pixelCanvas"></canvas>
</body>
<script>var canvas = document.getElementById('canvas');let img = new Image();//这里直接修改图片的路径img.src = "meinv.jpg";img.onload = function () {canvas.width = img.width;canvas.height = img.height;let ctx = canvas.getContext("2d");//获取图片宽高的最小值let min = Math.min(img.width, img.height);let r = min/2;ctx.fillStyle = ctx.createPattern(img, 'no-repeat');ctx.clearRect(0, 0, img.width, img.height);ctx.arc(img.width/2, img.height/2, r, 0, Math.PI * 2);ctx.fill();};
</script>
</html>

使用canvas生成一个圆形的图片相关推荐

小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
用canvas绘制一个圆形，实现绕着一个中心运动
实现效果使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果. 这里只是一个实例Demo,直接运行就可以,下面附上代码: <!doctype ...
微信小程序输入文字用canvas生成公章并转为图片
<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany&quo ...
canvas绘制一个圆形
如何用 Java 对 PDF 文件进行电子签章（二）生成一个图片签章
参考: https://blog.csdn.net/javasun608/article/details/79307845 https://blog.csdn.net/zdavb/article/de ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
android画一个圆形图片组件
imageview 显示圆形图片如下图. 圆形头像原理. 1.根据图片创建一个大小相同的画布. 2.在画布上画一个圆形. 3.画一个绘制交集,显示上层. // 将圆形图片,返回Bitmappublic ...
canvas canvas2image 生成bmp格式的图片
原因:canvas 生成图片,可通过toDataURL()方法. canvas.toDataURL(type, encoderOptions); 1.type:图片格式,默认为 image/png, ...
vue生成一个姓名的头像图片Base64格式
关注微信公众号:每日玩机获取ios.Android.tv.mac黑科技软件本方法是写成了全局方法,用this.$userHead(name)调用,如需单独在一个页面中使用,也可以在页面中单独写成一 ...

使用canvas生成一个圆形的图片

完整案例代码

使用canvas生成一个圆形的图片相关推荐

最新文章

热门文章