"丘比特之箭"——简单的canvas动画

最新推荐文章于 2022-08-04 09:34:40 发布

Levi_wlx

最新推荐文章于 2022-08-04 09:34:40 发布

阅读量1.8k

点赞数 1

分类专栏： Javascript 文章标签： js canvas 动画

本文链接：https://blog.csdn.net/weilixin88/article/details/54293213

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

刚学HTML的canvas，感觉这个家伙挺神奇的，而且人们给我的感觉它很简单，但事实应该不是这样的。起码对于我来说不是简单的，学啥都的有持之以恒的心啊。希望自己可以坚持，带着好奇的心去感受js动画带给自己的快乐吧！！

弄了几个小时的时间，就做了一个这样简单的动画，自己好笨啊。但还是想发上来，总结一下都用到了啥方法。

首先，一定是先创建一个画布canvas，设定画布的长和宽；然后，在画布中插入一种图片，作为背景图；插入图片的方法如下（也可以说加载图片）：

var c = document.getElementById("mycanvas");
var con = c.getContext("2d");

	var img = new Image();//声明一个新的图像对象
	img.src = "xin.jpg";//图像的来源
	img.onload = function(){调用onload方法
		con.drawImage(img,0,0);//将图像画到画布上，起点坐标(0,0)
	}

       插入的图片是一张心心相印的图像，而本人就想画出一只箭，像丘比特之箭一样，将两颗心串起来。这时候就要考虑：一只箭的有箭尾，箭杆，箭头。
由图可知，这只箭最好是从右下角向左上角穿过，另外箭杆的起始坐标你的想好设置在那里，终点坐标设置在那里，同时这只箭不能连续走下去，中间的有断开的地方（如上图），所以中间断开的坐标你也的选好吧。这些工作做完了，那我们开始画箭杆。这里我的箭杆是一堆连续的小圆构成（你也可以直接用lineTo画直线）
箭杆
首先，使用构造函数建立一个“父类”（我把它当作了C语言里的结构体定义）
function circlc(){this.x = 184;this.y = 0;this.color = "#F09";this.r = 2.6;}
var pen = new circlc();//实例化
接着写画圆的函数把：
function Draw(){con.fillStyle = pen.color;con.beginPath();con.arc(pen.x,pen.y,pen.r,0,Math.PI*2);con.fill();}
然后写该小实心圆移动的方法吧：
function animate(){pen.x -= 1;pen.y = 0.9357*pen.x - 4.5;//一条直线Draw(); }
箭尾 
 
   箭尾就是使用moveTo和lineTo函数，首先将画笔的坐标移动到箭杆的起始坐标上(用moveTo)，然后用一堆lineTo函数画线,最后用fill()函数填充 
  
 
   function tailDraw(){ 
  con.fillStyle = pen.color; 
  con.beginPath(); 
  con.moveTo(184,168); 
  con.lineTo(185,181); 
  con.lineTo(175,170); 
  con.lineTo(177,158); 
  con.lineTo(187,158); 
  con.lineTo(197,166); 
  con.fill(); 
  } 
 
箭头 
 
   箭头和箭尾的画法一样，需要画出一个三角形： 
  
 
   function headDraw(){ 
  con.fillStyle = pen.color; 
  con.beginPath(); 
  con.moveTo(7.5,2.5); 
  con.lineTo(29,7); 
  con.lineTo(11,19); 
  con.fill(); 
  } 
  
 
   好了，差不多了，然后调用一个相当于定时器的东西吧setInterval();我这里写的，个人感觉作为初学者还是有那么一点儿想法的（哈哈！！）

var shif = false;
function show(){   //这个函数是为了一个button准备的
		shif = !shif;
		if(shif)
		{
			tailDraw();//画出箭尾
			var time1 = setInterval(function(){//调用“定时器1”，定时时间是30ms
					t--;//这个值是和箭杆的pen.x值一样的
					animate();//画箭杆
					if(t <= 152)//当箭杆画到这里时，执行if内部的函数
					{	clearInterval(time1);//关掉“定时器1”
						pen.x = 40;//将下次画箭杆的坐标设好
						t = 40;//同样t值跟随
						var time2 = setInterval(function(){//再开一个“定时器2”
								t--;
								animate();//继续画出箭杆
								if(t <= 10){//箭杆终于画到头了
										headDraw();//把箭头画出来
										clearInterval(time2);//关掉“定时器2”
									}
							},20);//定时时间20ms
						}
					},20);
		}else{
			con.clearRect(0,0,200,200);//如果shif值为false，清空画布
			con.drawImage(img,0,0);	//重画背景图
			pen.x = 184;//重设箭杆坐标
			t = 184;//t值跟随
		}
	}
个人觉得，这个小程序中，有兴趣的伙伴们可以，再写一个初始化函数就更好了。另外，在画布的最左下角加载一张丘比特的图像，当点击按钮的时候，箭从丘比特的弓上射出
，就更加生动了。最后把所有代码粘过来，各位大神小神，多多指教。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>丘比特之箭</title>
	</head>
	<body align="center">
    	<div style="color:#F00"><strong>丘比特之箭</strong></div>
		<div>
			<canvas id="mycanvas" width="200" height="200"></canvas><br>
            <input type="button" value="演示" onClick="show()">
		</div>
        <script>
			var c = document.getElementById("mycanvas");
			var con = c.getContext("2d");
			var t = 184;
			var img = new Image();
			img.src = "xin.jpg";
			img.onload = function(){
					con.drawImage(img,0,0);
				}
				
			function circlc(){
					this.x = 184;
					this.y = 0;
					this.color = "#F09";
					this.r = 2.6;
				}
			var pen = new circlc();
			function tailDraw(){
					con.fillStyle = pen.color;
					con.beginPath();
					con.moveTo(184,168);
					con.lineTo(185,181);
					con.lineTo(175,170);
					con.lineTo(177,158);
					con.lineTo(187,158);
					con.lineTo(197,166);
					con.fill();
				}
			function headDraw(){
					con.fillStyle = pen.color;
					con.beginPath();
					con.moveTo(7.5,2.5);
					con.lineTo(29,7);
					con.lineTo(11,19);
					con.fill();
				}
			function Draw(){
					//con.drawImage(img,0,0);
					con.fillStyle = pen.color;
					con.beginPath();
					con.arc(pen.x,pen.y,pen.r,0,Math.PI*2);
					con.fill();
				}
			//window.addEventListener("load",Draw,true);//调试画笔起点的位置（观看用）
			function animate(){
					pen.x -= 1;
					pen.y = 0.9357*pen.x - 4.5;
					Draw();			
				}
			var shif = false;
			function show(){
					shif = !shif;
					if(shif)
					{
						tailDraw();
						var time1 = setInterval(function(){
								t--;
								animate();
								if(t <= 152)
								{	clearInterval(time1);
									pen.x = 40;
									t = 40;
									var time2 = setInterval(function(){
											t--;
											animate();
											if(t <= 10){
													headDraw();
													clearInterval(time2);
												}
										},20);
									}
								},20);
					}else{
						con.clearRect(0,0,200,200);
						con.drawImage(img,0,0);	
						pen.x = 184;
						t = 184;
					}
				}
			
		</script>
	</body>
</html>

Levi_wlx

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
"丘比特之箭"——简单的canvas动画

刚学HTML的canvas，感觉这个家伙挺神奇的，而且人们给我的感觉它很简单，但事实应该不是这样的。起码对于我来说不是简单的，学啥都的有持之以恒的心啊。希望自己可以坚持，带着好奇的心去感受js动画带给自己的快乐吧！！弄了几个小时的时间，就做了一个这样简单的动画，自己好笨啊。但还是想发上来，总结一下都用到了啥方法。首先，一定是先创建一个画布canvas，设定画
复制链接

扫一扫