清单 1. 绘制 canvas 矩形
function drawRect(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); // 获取 2D 渲染上下文
ctx.clearRect(0,0,300,200) ;// 清除以（0,0）为左上坐标原点，300*200 矩形区域内所有像素
ctx.fillStyle = '#00f'; // 设置矩形的填充属性，#00f 代表蓝色
ctx.strokeStyle = '#f00'; // 设置矩形的线条颜色，#f00 代表红色
ctx.fillRect(50,25,150,80); // 使用 fillStyle 填充一个 150*80 大小的矩形
ctx.strokeRect(45,20, 160, 90); // 以 strokeStype 属性为边的颜色绘制一个无填充矩形
}
}
清单 2. 绘制 canvas 路径
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00f';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arc(75,75,30,0,Math.PI, false); // 绘制一条半圆弧线
ctx.closePath(); // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧
ctx.fill(); // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
ctx.stroke();
}
}
清单 3. 使用平移 / 旋转变形方法绘制复杂位图
function drawPointCircle(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.translate(150,150); // 将 canvas 的原点从 (0,0) 平移至（150,150）
for (i=1;i<=2;i++){ // 绘制内外 2 层
if ((i % 2) == 1) {ctx.fillStyle = '#00f';}
else{ ctx.fillStyle = '#f00'; }
ctx.save(); // 保持开始绘制每一层时的状态一致
for (j=0;j<=i*6;j++){ // 每层生成点的数量
ctx.rotate(Math.PI/(3*i)); // 绕当前原点将坐标系顺时针旋转 Math.Pi/(3*i) 度
ctx.beginPath();
ctx.arc(0,20*i,5,0,Math.PI*2,true);
ctx.fill(); // 使用 fillType 值填充每个点
}
ctx.restore();
}
}
}
清单 4. 实现简单滤镜效果
function revertImage(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
// 从指定的矩形区域获取 canvas 像素数组
var imgdata = context.getImageData(100, 100, 100, 100);
var pixels = imgdata.data;
// 遍历每个像素并对 RGB 值进行取反
for (var i=0, n=pixels.length; i<n; i+= 4){
pixels[i] = 255-pixels[i];
pixels[i+1] = 255-pixels[i+1];
pixels[i+2] = 255-pixels[i+2];
}
// 在指定位置进行像素重绘
context.putImageData(imgdata, 100, 100);
}
}
清单 5. 实现小弹力球动画
<script type="text/javascript">
var x=0,y=0,dx=2,dy=3,context2D; // 小球从（0,0）开始移动，横向步长为 2，纵向步长为 3
function draw(){
context2D.clearRect(0, 0, canvas.width, canvas.height); // 清除整个 canvas 画面
drawCircle(x, y); // 使用自定义的画圆方法，在当前（x,y）坐标出画一个圆
// 判断边界值，调整 dx/dy 以改变 x/y 坐标变化方向。
if (x + dx > canvas.width || x + dx < 0) dx = -dx;
if (y + dy > canvas.height || y + dy < 0) dy = -dy;
x += dx;
y += dy;
}
window.onload = function (){
var canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 20); // 设置绘图周期为 20 毫秒
}
</script>
清单 6. 实现 canvas 对方向键和鼠标点击事件的响应
<script type="text/javascript">
var g_x,g_y; // 鼠标当前的坐标
var g_pointx, g_pointy; // 蓝色小球当前的坐标
var canvas;
function drawCircle(x,y){ // 以鼠标当前位置为原点绘制一个蓝色小球
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,300,300);
ctx.fillStyle = '#00f';
ctx.beginPath();
ctx.arc(x,y,20,0,Math.PI*2,true);
ctx.fill();
g_pointx = x;
g_pointy = y
}
function onMouseMove(evt) {
// 获取鼠标在 canvas 中的坐标位置
if (evt.layerX || evt.layerX == 0) { // FireFox
g_x = evt.layerX;
g_y = evt.layerY;
}
document.getElementById("xinfo").innerHTML = g_x;
document.getElementById("yinfo").innerHTML = g_y;
}
function onKeyPress(evt) {
var dx = 3; // 横向平移步长
var kbinfo = document.getElementById("kbinfo");
if (evt.keyCode == 39){
kbinfo.innerHTML="right";
if (g_x<300-dx) drawCircle(g_pointx+dx,g_pointy);
document.getElementById("xinfo").innerHTML = g_pointx;
}else if (evt.keyCode == 37){
kbinfo.innerHTML = "left";
if (g_x>dx) drawCircle(g_pointx-dx,g_pointy);
document.getElementById("xinfo").innerHTML = g_pointx;
}
}
window.onload = function(){
canvas = document.getElementById('canvas');
// 增加 canvas 节点对鼠标单击，移动以及键盘事件的响应函数
canvas.addEventListener('click', function(evt){drawCircle(g_x, g_y);} , false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('keypress', onKeyPress, false);
canvas.focus(); // 获得焦点之后，才能够对键盘事件进行捕获
}
</script>
