<!doctype html>
<html lang="zh">
<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>
<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>
之前发现在网上无法找到相关的内容，找的内容测试也发现有bug。遂，整理思路，自己研究一个可以实现效果的功能。具体思路就是：首先获取到图片的资源，如果使用img加载的，那一定要等img触发onload以后处理。我使用的图片是等宽高的图片，获取到图片资源以后，额外的创建一个canvas，将图像使用drawImage方法画到画布上，我们在这个canvas上面处理图像。通过canvas对象的conte...
先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。
.drawImage的绘制位置是相对原画布，而不是圆圈，这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。
//保存上文
targetCtx.save()
targetCtx.beginPath()
targetCtx.arc(110, 60,...
在 Canvas 中我们常常遇到的一个需求 绘制一个圆形或者一个圆角矩形图像，常用于展示用户头像，我们知道 CSS 有border-radius属性，但是 Canvas 是没有的~????
很尴尬，我们就来瞅瞅怎么整出一个圆形头像~
Part.1 效果
圆形头像
问题描述：在用canvas画圆形头像时，向画布右侧移动时，右边半个圆被切割了。
原因：给头像的画布位置有限，移出了画布的区域自然就被切割了，一开始用的是fill()去填充，总是会被切割。
改之前的代...
加载一张可访问的图片，使用Canvas绘制一个圆形画布，将图片在画布范围内进行展示，最后通过Canvas把绘制完成的图转换成可访问的base64编码路径
图片加载需要时间，绘制的过程要在图片加载完成之后，所有我们采用 async await 来保证绘制过程的顺利进行，最终获取我们想要的圆图URL
<img :src="src" alt="">
this.$next
很好，我可以为您提供一些指导来创建一个昆山地图的Canvas。以下是大致步骤：
1. 首先，您需要创建一个 HTML 文件，并在其中创建一个 Canvas 元素。您可以使用以下代码来创建一个基本的 Canvas 元素：
<!DOCTYPE html>
<title>昆山地图</title>
</head>
<canvas id="myCanvas" width="600" height="400"></canvas>
</body>
</html>
2. 接下来，您需要通过 JavaScript 获取 Canvas 元素，并在其中绘制地图。您可以使用以下代码来获取 Canvas 元素：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
3. 然后，您需要加载地图图像并将其绘制到 Canvas 上。您可以使用以下代码来加载图像：
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
img.src = "map.jpg";
4. 最后，您可以使用 Canvas 的绘图 API 来添加标记、文本和其他元素。例如，以下代码将在地图上添加一个标记：
ctx.beginPath();
ctx.arc(300, 200, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
这将在 Canvas 上创建一个红色的圆形标记，位于 (300, 200) 坐标处。
希望这些指导能够帮助您创建一个昆山地图的 Canvas！
