Canvas 绘制矩形
var drawing = document.getElementById('drawing');
if( drawing.getContext ){
var context = drawing.getContext('2d');
// 绘制矩形
context.fillStyle = '#0000ff';
context.fillRect( 10, 10 , 50 , 50 );
// 绘制半透明红色矩形
context.fillStyle = 'rgba(255,0,0,0.5)';
context.fillRect( 30, 30, 50, 50);
// 绘制描边矩形
context.lineWidth = 1;
context.strokeStyle = '#000000';
context.strokeRect( 50 , 50, 50, 50 );
// 清除一个小矩形
context.clearRect( 40,40,10,10 );
}
Canvas 绘制路径
var drawing = document.getElementById('drawing');
if( drawing.getContext ){
var context = drawing.getContext('2d');
// 开始路径
context.beginPath();
// 绘制外圆
context.arc( 100 , 100 , 99 , 0 , 2 * Math.PI , false );
// 绘制内圆
context.moveTo(194,100);
context.arc( 100 , 100 , 94 , 0 , 2 * Math.PI , false );
// 变换坐标原点
//context.translate(100,100);
// 旋转原点
//context.rotate(1);
// 绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
// 绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//
context.stroke();
// 绘制文本
context.font = "bold 14px 'Arial'";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);
}
Canvas 使用图像数据
window.onload = function(){
var drawing = document.getElementById('drawing');
if( drawing.getContext ){
var context = drawing.getContext("2d"),
image = document.getElementById('tulip'),
imageData , data,
i, len, average,
red, green, blue, alpha;
// 绘制原始图像
context.drawImage( image , 10 , 10 );
// 获得图像数据
imageData = context.getImageData(0,0,image.width,image.height);
data = imageData.data;
for( i=0, len=data.length; i<len; i+=4 ){
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
// 获得 rgb 平均值
average = Math.floor( (red+green+blue) / 3 );
// 配置颜色值, 透明度不变
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
// 回写图像数据
imageData.data = data;
context.putImageData( imageData , 400 , 400 );
}
}