用canvas绘制螺旋图

小小潘不放弃

已于 2022-03-07 20:04:29 修改

阅读量714

点赞数

分类专栏： HTML5和CSS3基础文章标签： css css3 html html5 web开发

于 2022-03-07 20:02:34 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123327133

版权

HTML5和CSS3基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

知识储备

这样解释吧：想象有两个画布，第一个是真实的，是我们最初设置的那个画布，所有的图形都在真实的画布上存在，第二个画布是虚拟的，我们通过位移，旋转，缩放来对这个虚拟的画布操作。所有图形都显示在真实和虚拟画布相交的部分。

坐标位移

canvas设置的就是一个矩形区域，默认情况下，坐标的原点是左上角，使用以下属性可以改变坐标原点的位置。
translate(x,y);
注意这里的x和y是相对于原坐标原点偏移的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
	<canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas>
	
	<script language="JavaScript">
	var canvas=document.querySelector("#mycanvas");
	var txt=canvas.getContext("2d");
	// 第一个正方形，坐标原点在左上角
	txt.beginPath();
	txt.fillStyle="aqua";
	txt.fillRect(10,10,60,60);
	// 第二个矩形，对坐标原点偏移
	txt.beginPath();
	txt.translate(100,100);
	txt.fillStyle="aqua";
	txt.fillRect(10,10,60,60);
	// 第三个矩形，对坐标原点偏移
	// 虚拟画布只和原始画布有一部分重叠
	txt.beginPath();
	txt.translate(140,60);
	txt.fillStyle="aqua";
	txt.fillRect(10,10,60,60);
	</script>
</body>
</html>

在这里插入图片描述

图形缩放

scale(a,b);
第一个参数是水平缩放，第二个参数是垂直缩放。值小于1是缩小，大于1是放大，等于1是不做缩放处理。
这里需要注意缩放是相对于原点缩放，如果要对图形缩放，需要把原点位置移到图形的中心。所有scale常与translate搭配使用。

图形旋转

rotate（angle）；
该方法只有一个参数，即角度。这是以原点为中心旋转canvas。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style type="text/css">
	canvas{
		border:1px solid black;
	}
	</style>
</head>
<body>
	<canvas id="mycanvas"width="400px"height="400px"></canvas>
	
	<script>
	var canvas=document.querySelector("#mycanvas");
	var txt=canvas.getContext("2d");
	
	txt.beginPath();
	txt.arc(300,50,40,0,Math.PI*2,false);
	txt.stroke();
	
	txt.beginPath();
	txt.rotate(Math.PI/6);
	txt.arc(300,50,40,0,Math.PI*2,false);
	txt.stroke();
	</script>
</body>
</html>

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

代码如下：

绘制螺旋图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style type="text/css">
	canvas{
		border:1px solid black;
	}
	</style>
</head>
<body>
	<canvas id="mycanvas"width="320px"height="320px"></canvas>
	
	<script>
	var canvas=document.querySelector("#mycanvas");
	var txt=canvas.getContext("2d");
	// 设置初始原点
	txt.translate(180,20);
	// 循环画圆
	for(var i=0;i<80;i++){
		// 改变位置
		txt.translate(30,30);
		// 缩放
		txt.scale(0.95,0.95);
		// 旋转
		txt.rotate(Math.PI/12);
		txt.beginPath();
		txt.arc(0,0,50,0,2*Math.PI,true);
		txt.fillStyle="pink";
		txt.globalAlpha=0.5;
		txt.fill();
		txt.stroke();
	}
	</script>
</body>
</html>

小小潘不放弃

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用canvas绘制螺旋图

知识储备这样解释吧：想象有两个画布，第一个是真实的，是我们最初设置的那个画布，所有的图形都在真实的画布上存在，第二个画布是虚拟的，我们通过位移，旋转，缩放来对这个虚拟的画布操作。所有图形都显示在真实和虚拟画布相交的部分。坐标位移canvas设置的就是一个矩形区域，默认情况下，坐标的原点是左上角，使用以下属性可以改变坐标原点的位置。translate(x,y);注意这里的x和y是相对于原坐标原点偏移的距离。<!DOCTYPE html><html lang="en">&
复制链接

扫一扫