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

          刚学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;</