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

来源：互联网发布：回收珠宝的软件编辑：程序博客网时间：2024/04/29 12:27

刚学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”，定时时间是30mst--;//这个值是和箭杆的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>
                                                     0        0           	
					
					   "丘比特之箭"——简单的canvas动画
	  	   Android Canvas绘制丘比特之箭
	  	   简单的canvas动画原理
	  	   不能相见的爱人——丘比特的爱情故事
	  	   制作一个简单的canvas动画
	  	   canvas简单动画效果
	  	   canvas人物动画—走路
	  	   html5之canvas动画
	  	   Canvas之粒子动画
	  	   简单的Canvas刮刮乐带动画效果的实例
	  	   BZOJ2539: [Ctsc2000]丘比特的烦恼
	  	   iPhone开发【十三】动画效果之最简单的动画——动态加载图片
	  	   iPhone开发【十三】动画效果之最简单的动画——动态加载图片
	  	   canvas 动画制作——时钟
	  	   JS Canvas动画之太极图
	  	   canvas动画之剪切圆
	  	   canvas写的立方体动画
	  	   html5的canvas旋转动画
	     		  
	  	   文章标题
	  	   PHP-环境-Lamp环境搭建-生产环境
	  	   ViewPager 详解（二）—详解四大函数
	  	   写一份gulp常用配置文件，构建前端工作流
	  	   谷哥的小弟学前端(03)——CSS基础知识（1）
	  	   "丘比特之箭"——简单的canvas动画
	  	   读《魔鬼经济学03》
	  	   使用命令行模式启动VMWare虚拟机
	  	   python函数式编程 map、reduce、filter
	  	   CNN代码学习
	  	   微信小程序源代码demo
	  	   HTML5----FormData实例用法
	  	   深入浅出Mybatis-分页
	  	   DOM4J、DOM、JDOM和SAX之间的比较

回收珠宝的软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子外币兑换淘金币兑换美元兑换兑换美元捕鱼兑换礼包兑换美金兑换兑换礼品泰铢兑换兑换流量外币兑换网外币兑换器兑换手机钱兑换里程兑换韩元兑换 paypal兑换英镑兑换港币兑换兑换中心兑换充值卡钱的兑换纸黄金兑换澳元兑换承兑兑换日元兑换货币兑换器兑换qq币兑换港币可以兑换悟性暴走大侠兑换超级美人兑换系统 kpl兑换码领取999999999点券暴走大侠兑换码大全移动积分兑换逃跑吧少年兑换码积分兑换商城宇宙兑换系统超级兑换系统逃跑少年兑换码积分兑换话费