记一次简单的前端学习——阿基米德螺旋的绘制及功能

最新推荐文章于 2023-02-18 18:52:37 发布

laymanMing

最新推荐文章于 2023-02-18 18:52:37 发布

阅读量897

点赞数

文章标签：前端 canvas

本文链接：https://blog.csdn.net/qq_34793634/article/details/86603589

版权

在此首先感谢这位大大的资料↓
https://blog.csdn.net/github_39335046/article/details/73931821
之前我一直在寻找canvas 怎么绘制阿基米德螺旋的文章但苦寻无果，最后看了上面这位大大的文章便觉得可以参考，才有了之后的成品。
先从最初的想法说起，记得以前看过一个视频是关于画家不断的画圆圈最后通过下笔的轻重和粗细来形成一种画里有画的感觉，类似(https://www.iqiyi.com/v_19rrh4yr7s.html)。然后我就想我能不能用canvas也作出这样的效果来。于是就开始去找怎么用canvas 绘制螺旋。首先是参考另一位网友的方法，但可惜这种方法不能知道当前画笔所处的位置，所以只好放弃寻找其他的方法。最后也是不负有心人找到了。( • ̀ω•́ )✧先贴上代码
因为博主其实是个后端新生，所以前端接触的比较少，完全是因为个人兴趣所以代码比较简陋也希望大家可以见谅，如果有不足的地方希望大家可以补充！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var canvas;
			var ctx;
			var dot = [];
			var a = 0;
			var f = 360
			var b = 0;
			var v = 0.005;
			var p1;
			var center = {x:500,y:300};
			var id;
			window.onload = function(){
				/**
				 * 页面加载时将图片加载入Canvas
				 */
				canvas = document.getElementById("myCanvas");
				ctx = canvas.getContext("2d");
				img = new Image();
				img.src = "img/start.png";
				img.onload = function(){
				 	//ctx.drawImage(img,300,100,400,400);
				 	ctx.drawImage(img,0,0,1000,600);
				 }
			}
			function drawCircle(p1){
				ctx.beginPath();
				var flag = false;
				var color= "#000000";
				for(var i = 0;i < dot.length;i++){
					if((dot[i].bx - p1.x <= 5 && dot[i].bx - p1.x >= 0) && (dot[i].by - p1.y <= 5 && dot[i].by - p1.y >= 0)  ){
						flag = true;
						var red = dot[i].red.toString(16);		//将十进制的RGB值转换为16进制并在空位补0
						var green = dot[i].green.toString(16);
						var blue = dot[i].blue.toString(16);
						if(red.length == 1){
							red = "0" + red;
						}
						if(green.length == 1){
							green = "0" + green;
						}
						if(blue.length == 1){
							blue = "0" + blue;
						}
						color = "#" + red + green + blue;
						break;
					}
				}
				if(flag){
					ctx.arc(p1.x,p1.y,1,0,2 * Math.PI);
				}else{
					ctx.arc(p1.x,p1.y,0.2,0,2 * Math.PI);
				}
				//ctx.stroke();
				ctx.fillStyle = color;
				ctx.fill();
			}
			function Ball(x,y,red,green,blue){
				this.bx = x;
				this.by = y;
				this.red = red;
				this.green = green;
				this.blue = blue;
			}
			function getData(){
				images = ctx.getImageData(0,0,1000,600);
				/**
				 * 将图片上有颜色的点存储进数组中
				 */
				for(var x = 0; x < canvas.width; x += 5){
					for(var y =0; y < canvas.height; y += 5){
						var i = (y * images.width + x) * 4;
						if(images.data[i+3] >= 125){ 			//表示有颜色
							var red = images.data[i];				//分别获取RGB值
							var green = images.data[i+1];
							var blue = images.data[i+2];
							var b1 = new Ball(x,y,red,green,blue);
							dot.push(b1);
						}
					}
				}
			}
			function startChange(){
				ctx.clearRect(0,0,1000,600);
				/**
				 * 开启定时器
				 */
				id = setInterval(function(){
					a = a + Math.PI / f;
					b = b + v;
					p1 = {x: center.x + b * Math.sin(a),y:center.y - b * Math.cos(a)}
					drawCircle(p1)
				},1)
			}
			function stopChange(){
				clearInterval(id)
			}
			
		</script>
	</head>
	<body>
		<canvas height="600px" width="1000px" id="myCanvas" style="border: 2px solid red;"></canvas>
		<button style="height: 100px;width: 100px;" onclick="getData()">获取消息</button>
		<button style="height: 100px;width: 100px;" onclick="startChange()">开始转换</button>
		<button style="height: 100px;width: 100px;" onclick="stopChange()">暂停</button>
	</body>
</html>

之前做了一个纯黑色的版本，这个版本是可以根据图片颜色来决定下笔的颜色。如果你需要将其换回黑白只要修改下ctx.fillStyle 为黑色即可，附上一个成品图。<彩色版本>
在这里插入图片描述 <黑白版本>
今天就到此啦再会！

laymanMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记一次简单的前端学习——阿基米德螺旋的绘制及功能

在此首先感谢这位大大的资料↓https://blog.csdn.net/github_39335046/article/details/73931821之前我一直在寻找canvas 怎么绘制阿基米德螺旋的文章但苦寻无果，最后看了上面这位大大的文章便觉得可以参考，才有了之后的成品。先从最初的想法说起，记得以前看过一个视频是关于画家不断的画圆圈最后通过下笔的轻重和粗细来形成一种画里有画的感觉，类...
复制链接

扫一扫