《JavaScript 编程实战》阅读笔记（一）

可以通过 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'
```
 });
```

demo02.png

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 等。

《JavaScript 编程实战》阅读笔记（一）

推荐阅读更多精彩内容