决定把触角伸入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