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