好久不用canvas，昨天有小妹问怎么给一个圆形设置背景图，发现之前会的都遗忘了，顺带重新学习了下canvas，记录下顺手的小知识点。
先上效果图
图片原图：
直接上代码，注释解释的挺详细的~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas画圆并追加背景图</title>
<style>
#canvasBox {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="500px" height="500px" id="canvasBox"></canvas>
</body>
<script>
const cWidth = cHeight = 500; // 画布的宽高
const cR = 200; // 圆的半径
let ctx = document.getElementById("canvasBox").getContext("2d");
ctx.beginPath();
ctx.arc(cWidth / 2, cHeight/ 2, cR, 0, Math.PI * 2, false);
ctx.clip(); // 划重点---将画的圆形切割出来
let img = new Image();
img.src = './img/bg.jpg';
img.onload = () => { // 划重点---图片加载完后执行
img.width = 400;
img.height = 400;
/**
* drawImage()绘制图片，参数分别是:
* 1.图片,
* 2.x起始点（这里用的是 画布宽度/2 - 图片的宽度/2）
* 3.y的起始点（这里用的是 画布高度/2 - 图片的高度/2）
* 4.图片的宽度
* 5.图片的高度
*/
ctx.drawImage(img,cWidth / 2 - img.width / 2, cHeight / 2 - img.height / 2, img.width, img.height);
}
ctx.strokeStyle = "orange";
ctx.stroke();
</script>
</html>
是什么原因让懒惰的小菜花一周更了两篇博文？哦，原来上周忘了写，只是补缴而已~再次感谢大橙子的贡献
5277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
