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 
 
来源：https://www.cnblogs.com/rubylouvre/archive/2012/05/19/2508662.html