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

1. 可以通过 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。

2. 我们可能会想要在我们的网页中使用 SVG 图形， 但是 SVG API 很有深度，不过不用担心，我们可以使用 Raphaël，这是一个 SVG JavaScript 库，我们可以利用这个库轻松地绘制 SVG 图形，可以在 Raphaël 下载该库。

3. 下面来看看利用 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 表示关闭路径。

4. 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

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