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);
                    }
                })();
              

            });