当前位置：网站首页>canvas - 旋转

canvas - 旋转

2022-07-24 05:17:00 【梅花三】

canvas是基于状态绘制的，每次平移、旋转、缩放、矩阵等变换之前，先调用save()保存当前绘图状态，变换结束之后，若要继续使用变换之前的状态，调用restore()方法即可。

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#cvs {
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div id='container'>
		<canvas id='cvs'>
			sorry, your browser doesn't support canvas API.
		</canvas>
	</div>
</body>
<script>
	window.onload = function() {
		// 获取画布
		const cvs = document.querySelector('#cvs')
		cvs.width = 800
		cvs.height = 600
		// 获取画笔
		const ctx = cvs.getContext('2d')

		for(let i = 0; i < 11; i++) {
			ctx.save()
			ctx.translate(400, 300)
			ctx.rotate(36 * i * Math.PI / 180)
			ctx.bezierCurveTo(30, 50, 350, 550, 100, 150)
			ctx.fillStyle = 'rgba(255, 0, 255, 0.25)'
			ctx.fill()
			ctx.restore()
		}
	}
</script>
</html>
原网站

版权声明
本文为[梅花三]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43794073/article/details/106037088

边栏推荐

猜你喜欢

随机推荐