canvas - 旋转

最新推荐文章于 2024-03-30 23:39:25 发布

梅花三

最新推荐文章于 2024-03-30 23:39:25 发布

阅读量353

点赞数

分类专栏： canvas javascript 文章标签： canvas javascript

本文链接：https://blog.csdn.net/weixin_43794073/article/details/106037088

版权

javascript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

canvas

5 篇文章 0 订阅

订阅专栏

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>

梅花三

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas - 旋转

canvas是基于状态绘制的，每次平移、旋转、缩放、矩阵等变换之前，先调用save()保存当前绘图状态，变换结束之后，若要继续使用变换之前的状态，调用restore()方法即可。效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #cvs { backgrou
复制链接

扫一扫