canvas 实现圆形加背景图

最新推荐文章于 2024-08-16 18:48:55 发布

小菜花29

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量2k

点赞数 4

本文链接：https://blog.csdn.net/jinse29/article/details/121159826

版权

好久不用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>

是什么原因让懒惰的小菜花一周更了两篇博文？哦，原来上周忘了写，只是补缴而已~再次感谢大橙子的贡献