canvas画布变换画六芒星

最新推荐文章于 2024-04-15 17:36:24 发布

sysuzjz

最新推荐文章于 2024-04-15 17:36:24 发布

阅读量5.8k

点赞数 2

分类专栏：前端文章标签： canvas 六芒星画布变换方法

本文链接：https://blog.csdn.net/sysuzjz/article/details/53108028

版权

要求使用canvas的画布变换方法。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>六芒星</title>
	<meta charset="utf-8">
</head>
<body>
	<canvas id="canvas" width="220" height="220"></canvas>

	<script type="text/javascript">
		var canvas = document.querySelector('#canvas'),
			context = canvas.getContext('2d');

		var width = canvas.width,
			height = canvas.height;

		// 原点坐标
		var originX = width / 2,
			originY = height / 2,
			radius = 100;

		context.lineWidth = 1;

		// 画外圈
		context.strokeStyle = '#000';
		context.beginPath();
		context.arc(originX, originY, radius, 0, 2 * Math.PI);
		context.stroke();
		context.closePath();

		context.beginPath();
		con

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sysuzjz

关注关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
canvas画布变换画六芒星

要求使用canvas的画布变换方法。效果如下：代码如下：六芒星 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); var width = canvas.width, height = canvas.height;
复制链接

扫一扫