canvas学习笔记

决定把触角伸入canvas领域，但canvas还没有怎么熟，边学边构建，把重复烦锁的劳动部分统统转化API。

$1.require("ready,draw20120519",function(){
    var $ = $1;
                   //画一个黑色的矩形
    var context = $("#canvas1").context2D();
    context.fillRect(0, 0, 150, 100);
    //画一个蓝色的矩形
    var context = $("#canvas2").context2D();
    context.fillStyle = '#00f';
    context.fillRect(0, 0, 150, 100);
    var context = $("#canvas3").context2D();
    context.fillStyle   = '#00f'; // 设定填空颜色
    context.strokeStyle = '#f00'; // 设定轮廓颜色
    context.lineWidth   = 4;      // 设定轮廓的厚度
 
    //画许多矩形
    context.fillRect  (0,   0, 150, 50);//画一个实心矩形
    context.strokeRect(0,  60, 150, 50);//画一个空心矩形
    context.clearRect (30, 25,  90, 60);//擦除一个矩形,并用一个透明的颜色填充它。
    context.strokeRect(30, 25,  90, 60);//画一个空心矩形
    //画一个三角形
    var context = $("#canvas4").context2D();
    context.fillStyle   = '#00f';
    context.strokeStyle = '#f00';
    context.lineWidth   = 4;
    //用过移动线段来完成三角形
    context.beginPath();
    context.moveTo(10, 10); 
    context.lineTo(100, 10);
    context.lineTo(10, 100);
    context.lineTo(10, 10);
    //闭合线段
    context.closePath();
    //必须调用了以下两个方法才显出三角形
    context.fill();
    context.stroke();
    var context = $("#canvas5").context2D();
 
    var img = new Image();
    // Once it's loaded draw the image on the canvas.
    img.addEventListener('load', function () {
        // Original resolution: x, y.
        context.drawImage(this, 0, 0);
 
        // Now resize the image: x, y, w, h.
        context.drawImage(this, 160, 0, 120, 70);
 
    }, false);
 
    img.src = 'http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg';
 
 
    (function(){
        //通过点阵图绘画
        var context = $("#canvas6").context2D();
        var imgd = false,
        w = 50, h = 50,
        x = 0,  y = 0;
        // Not all browsers implement createImageData. On such browsers we obtain the
        // ImageData object using the getImageData method. The worst-case scenario is
        // to create an object *similar* to the ImageData object and hope for the best
        // luck.
        if (context.createImageData) {
            imgd = context.createImageData(w, h);
        } else if (context.getImageData) {
            imgd = context.getImageData(0, 0, w, h);
        } else {
            imgd = {'width' : w, 'height' : h, 'data' : new Array(w*h*4)};
        }
        var pix = imgd.data;
 
        // Loop over each pixel.
        for (var i = 0, n = pix.length; i < n; i += 4) {
            pix[i  ] = 255; // the red channel
            pix[i+3] = 127; // the alpha channel
        }
        // Draw the ImageData object.
        context.putImageData(imgd, x, y);
    })();
    (function(){
        //添加文本
        var context = $("#canvas7").context2D();
        // Let's draw "Hello world!" in blue.
        context.fillStyle    = '#00f';
 
        // The font property is like the CSS font property.
        context.font         = 'italic 30px sans-serif';
        context.textBaseline = 'top';
 
        if (context.fillText) {
            context.fillText('Hello world!', 0, 0);
        }
        // It looks like WebKit doesn't support the strokeText method.
        // Tested on Ubuntu 8.10 Linux in WebKitGTK revision 38095 (2008-11-04, svn
        // trunk build).
        context.font = 'bold 30px sans-serif';
        if (context.strokeText) {
            context.strokeText('Hello world!', 0, 50);
        }
    })();
    (function(){
        //盒子阴影
        var context = $("#canvas8").context2D();
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur    = 4;
        context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
        context.fillStyle     = '#00f';
        context.fillRect(20, 20, 150, 100);
    })();
    (function(){
        //线性渐变
        var context = $("#canvas9").context2D();
        // The hue spectrum used by HSV color picker charts.
        var color, hue = [
            [255,   0,   0 ], // 0, Red,       0°
            [255, 255,   0 ], // 1, Yellow,   60°
            [  0, 255,   0 ], // 2, Green,   120°
            [  0, 255, 255 ], // 3, Cyan,    180°
            [  0,   0, 255 ], // 4, Blue,    240°
            [255,   0, 255 ], // 5, Magenta, 300°
            [255,   0,   0]], // 6, Red,     360°
 
        // Create the linear gradient: sx, sy, dx, dy.
        // That's the start (x,y) coordinates, followed by the destination (x,y).
        gradient = context.createLinearGradient(0, 0, $("#canvas9")[0].width, 0);
 
        // Add the color stops.
        for (var i = 0; i <= 6; i++) {
            color = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
            gradient.addColorStop(i * 1/6, color);
        }
 
        // Use the gradient for the fillStyle.
        context.fillStyle = gradient;
 
        // Now let's draw a rectangle with a black shadow.
        // Shadows only render in Konqueror 4.1 and Firefox 3.1 nightlies.
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur    = 4;
        context.shadowColor   = 'rgba(0, 0, 0, 0.5)';
        context.fillRect(5, 5, 200, 100);
 
        // For effect, let's also draw some text: "Hello world!".
        context.font = 'bold 36px sans-serif';
        context.textBaseline = 'top';
 
        // Drawing text is only supported by Firefox 3.1 nightlies and recent WebKit builds.
        // Due to some bug, text+gradients don't render fine in Webkit.
 
        if (context.fillText) {
            context.fillText('Hello world!', 5, 120, 200);
        }
 
        // strokeText is unsupported by Webkit.
        context.strokeStyle = '#666';
        if (context.strokeText) {
            context.strokeText('Hello world!', 5, 120, 200);
        }
    })();
   
 
});