-
可以通过
Canvas画一个矩形并让它动起来，具体代码如下。
<canvas id="my_canvas" width="200" height="150"></canvas><script> var canvas = document.getElementById("my_canvas"); var my_context = canvas.getContext("2d"); my_context.fillStyle = "#f00"; my_context.fillRect(0, 10, 50, 50); var posX = 0; var drawInterval = setInterval(function () { posX++; if (posX > 150) { posX = 0; } my_context.clearRect(0, 0, 200, 150); my_context.fillRect(posX, 10, 50, 50); }, 1000 / 60); </script>
首先创建出一个宽 200， 高 150 的画布，利用 JS 在 (0,10) 位置画出一个宽 50, 高 50 的填充矩形，然后利用 setInterval() 函数设置每隔 1/60 秒清空画布上的所有内容并重新绘制矩形，因为这里时间的单位是 ms ，所以 1/60 秒写成 1000/60。
我们可能会想要在我们的网页中使用
SVG图形， 但是SVG API很有深度，不过不用担心，我们可以使用Raphaël，这是一个SVG JavaScript库，我们可以利用这个库轻松地绘制SVG图形，可以在 Raphaël 下载该库。下面来看看利用
Raphael如何绘制图形，首先声明一个用于作画的包装器
<div id="my_svg"></div>
绘制一个矩形并设置其填充颜色
var paper = Raphael(document.getElementById("my_svg"), 600, 400);
var rect = paper.rect(0, 0, 600, 400);
rect.attr("fill", "#FFF");
绘制一个圆形
var paper = Raphael(document.getElementById("my_svg"), 600, 400);
var circle = paper.circle(300, 200, 120);
circle.attr("fill", "#F00");
circle.attr("stroke-width", 0);
绘制一个三角形。
var paper = Raphael(document.getElementById("my_svg"), 600, 400);
var triangle = paper.path('M100,100 L100,150,L150,150 Z');
可见，这里是利用path路径绘制的，这里的M相当于moveTo()，L相当于lineTo()，而最后的Z表示关闭路径。-
Raphaël还为SVG提供了各种样式选项，下面就以此画一个带渐变的矩形。
var paper = Raphael(document.getElementById("my_svg"), 600, 400);
var rect = paper.rect(0, 0, 480, 320);
rect.attr({
'gradient': '90-#393-#396',
'stroke-width': 0
});
效果图如下
demo01.png
90-#393-#396，90是渐变梯度，接下来的两个参数是颜色码。很多时候我们可能不知道怎么选择颜色，可以去 Web 安全色 挑选自己喜欢的颜色。我们还可以给我们的图形加上边框，并设置边框的样式。
rect.attr({
'gradient': '90-#393-#396',
'stroke-width': 20,
'stroke': '#3C6',
'stroke-linejoin': 'round'});
-
Raphaël对动画的支持也十分强大，比如说我们可以利用下面这一行代码，让我们上面绘制的图形旋转360度。
rect.animate({transform: 'r 360'}, 3000, '<>');
这里，r实际上就是rotate的缩写 ，<>表示淡入淡出的动画效果。当然还有其它效果，比如说<是淡入，>是淡出。在CSS中设置过transform的人都知道，既然有rotate，那肯定得有scale,translate吧？是的，都有，他们可以结合起来使用，就像下面这样。
rect.animate({transform: 'r 360 t 100,100 s 0.2'}, 3000, '<>');
在animate()函数中我们还可以设置回调函数，在第一个动画效果执行完毕之后，继续下一个动画效果。
rect.animate({transform: 'r 360'}, 3000, '<>', function () {
rect.animate({transform: 's 0.5'}, 3000, '<>');
});
我们可能不想让一个元素自动就触发一个动画效果，一般情况下，只有当鼠标点击或者鼠标越过元素的时候，才触发效果，当然这一点也是可以实现的。下面我们就为我们的元素设置鼠标点击事件。
rect.node.onclick = function () {
rect.animate({transform: 'r 360'}, 3000, '<>', function () {
rect.animate({transform: 's 0.5'}, 3000, '<>');
});
}
也可以将onclick改为onmouseover, onmousedown,onmouseup等。
