动态图形的绘制与拓展

观察临摹对象

临摹对象
在这里插入图片描述
基本元素:这个动态图的基本元素一目了然,是36个(开口方向各不相同的)3/4圆。
运动规律:可以看作是如图①②③④四个3/4圆的周期运动。起始状态①②③④的开口方向指向四圆的中心,接着①和④以逆时针、②和③以顺时针,同速度旋转。以此类推,构成9个①②③④组合,36个3/4圆。

准备工作

由于我是一个什么都要百度的零基础小白,所以这篇文章也会写的非常简单、入门、易懂、细致入微。

这里使用的是编辑器Sublime Text。(为什么不用p5.js在线编辑?问就是,小盆友喜欢黑底彩字高级界面的亚子 紧跟老师的步伐!)html5的一些基本操作,可以点这里了解html5基础与SublimeText安装入门

四分之三圆怎么画?画圆函数的参数意义?百度一下你就知道。
图形太多了?而且很相似?那就用for循环生成吧。
圆要不停地运动?周期性动画?那怕不是要不停地刷新界面,要周期性调用。

哎嗨,不过是一些基本问题嘛,挨个儿突破还是很简单的!

代码与批注

1、canvas元素可以提供一种使用 JavaScript来绘制图形的方法。canvas只有两个特定属性“width”和“height”以及所有核心HTML5属性,如id,name和class等。如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>动态图形绘制</title>
</head>

<body>
<canvas id="3/4circle" width="600" height="600">不支持Canvas</canvas>
	

使用getElementById()方法在DOM中轻松找到canvas元素。然后从canvas中获取上下文环境,这里是2D图形。如下所示:

var canvas = document.getElementById("3/4circle");
var c1 = canvas.getContext("2d");

2、开始画第一个圆:
(参考资料1:html5如何绘制饼图
(参考资料2:我要五彩斑斓(颜色的十六进制表示)

for(var i=1;i<=12;i+=4)
{
  for(var j=1;j<=12;j+=4)
  {
	function drawCircle1()
	{
	 c1.fillStyle = '#6f6f6f';
	 //定义一种颜色来填充,给你整个灰色吧。p.s.这里是填充颜色,如果是绘制路径,就用strokeStyle
	 c1.beginPath();
	 //调用beginPath开始绘制
	 c1.moveTo(50*i,50*j);
	 //首先将画笔移动到圆心处,从圆心开始绘制路径。画圆的话不需要每次都回圆心,但是画3/4的饼图就需要了。
	 c1.arc(50*i,50*j,50,Math.PI*0,Math.PI*0.5,true);
	 //是第一个3/4圆。参数的含义为:前两个是圆心坐标,第三个参数是半径大小,第四个参数是圆周起始位置,第五个参数是弧长,就是我们圆弧的范围,Math.PI*2就是整个圆了,Math.PI是半圆。第六个参数是个布尔值,确定是顺时针还是逆时针,true是逆时针,false是顺时针。
	 c1.fill();
	 //之后进行扇形区域的填充,使用fill方法即可
	}
  }
}

3、清空+刷新:
clearRect() 方法清空给定矩形内的指定像素。

c1.clearRect(0,0,600,600);

4、变换画图的角度,实现旋转

jiao0-=0.015;
jiao1-=0.015;
jiao2-=0.015;
jiao3-=0.015;
jiao7+=0.015;
jiao4+=0.015;
jiao5+=0.015;
jiao6+=0.015;

5、周期性调用函数:

(参考资料:更多的setInterval方法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval()方法的参数。
语法: setInterval(code,millisec[,“lang”])
参数: code必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
返回值: 一个可以传递给Window.clearInterval() 从而取消对 code 的周期性执行的值。

6、完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>动态图形绘制</title>
</head>

<body>
<canvas id="3/4circle" width="600" height="600">不支持Canvas!</canvas>
	
<script type="text/javascript">

    var canvas = document.getElementById("3/4circle");
	var c1 = canvas.getContext("2d");

	var jiao0=jiao4=Math.PI*0;
	var jiao1=jiao5=Math.PI*0.5;
	var jiao2=jiao6=Math.PI*1;
	var jiao3=jiao7=Math.PI*1.5;
	//var alpha=0.01;
    
function drawandmore()
{   
    c1.clearRect(0,0,600,600);
	            
	for(var i=1;i<=12;i+=4)
		{
			for(var j=1;j<=12;j+=4)
			{
				 c1.fillStyle = '#6f6f6f';
	             c1.beginPath();
	             function drawCircle1(){
	             c1.moveTo(50*i,50*j);
	             c1.arc(50*i,50*j,50,jiao0,jiao1,true);
	             c1.fill();
	            jiao0-=0.015;
	   	        jiao1-=0.015;
	             }      
	   	  
				 function drawCircle2(){
	             c1.moveTo(50*(i+2),50*(j+2));
	             c1.arc(50*(i+2),50*(j+2),50,jiao2,jiao3,true);
	             c1.fill();
	            jiao2-=0.015;
	   	        jiao3-=0.015;
	   	         }

	   	        function drawCircle3(){
	             c1.moveTo(50*i,50*(j+2));
	             c1.arc(50*i,50*(j+2),50,jiao7,jiao4,true);
	             c1.fill();
	             jiao7+=0.015;
	             jiao4+=0.015;
	             }

	             function drawCircle4(){
	             c1.moveTo(50*(i+2),50*j);
	             c1.arc(50*(i+2),50*j,50,jiao5,jiao6,true);
	             c1.fill();
	             jiao5+=0.015;
	             jiao6+=0.015;
	             }
	            
				drawCircle1();drawCircle2();drawCircle3();drawCircle4();
				
	        }	
	    }
	    
}
	setInterval(drawandmore,40);
	
</script>
</body>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
</html>

7、clearRect()放在哪里?如果按照其他示例的话,应该放在靠后结尾的地方。可是这对于我的代码不成立,最后发现想要刷新,需要放在for循环的内容之前。因为“drawandmore”是在不断被调用的,其中的for循环也按照i和j的轮次不断运行。这里的清空刷新应该是建立在图画好了一遍之后,而不是没画好没呈现就清空了。
草稿

拓展自由创作

拓展1
拓展4
拓展5

总结与反思

这次选择的动态图难度不大,所以完成的很快,跟原图也差不多一样(不要在意颜色的细节)。但是做拓展的时候……哎呀这咋没啥好拓展的呢??然后就很幼稚地变了颜色,变了速度,变了方向,变了大小……感觉最后一张在视觉上还是很好看的!
过几天就要画自画像啦,想在下次的作业中多一点交互,多一点创意。

版权声明:本文为weixin_43703173原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43703173/article/details/102648100