html5 canvas入门

可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：

<canvas id=”myCanvas” width=”100px” height=”100px”>

或者javascript对象属性设置：

canvas.width=1024;
canvas.height=768;

使用canvas，只有一种操作方式，使用javascript。

获得canvas对象的上下文对象，该对象是操作canvas的主要对象：

var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(’2d’);

画简单的线

使用canvas画最简单的线， 点击运行示例，结果看起来是这样：

 

代码很简单：

<script>
window.onload = function () {
var canvas = document.getElementById(‘myCanvas’);
canvas.width=1024;
canvas.height=768;
var context = canvas.getContext(’2d’);

context.moveTo(100, 100);//移动到起点
context.lineTo(1024-100, 768-100);//从起点划线到端点
context.lineWidth = 10;//线的宽度
context.strokeStyle = “#ff0000″;//线的颜色
context.lineCap = “butt”;//端点边缘样式，默认是butt
context.stroke();//为线填充颜色，默认颜色黑
};

加入图片

如果想在canvas里加入图片， 点击运行示例，结果类似这样：

 

主要代码如下：

<script>
window.onload = function () {
var canvas = document.getElementById(‘myCanvas’);
canvas.width=1024;
canvas.height=768;
var context = canvas.getContext(’2d’);

var image = new Image();
var x = 50, y = 10;

image.onload = function () {
context.drawImage(image,x,y,image.width*.5,image.height*.5);//缩小到一半
};

image.src = ‘tank.gif’;
};

简单的动画

使用canvas处理动画，其实本质上就是定时重绘canvas。比如在上面图片示例做修改，让坦克运动起来， 点击运行示例：

 

这里要考虑的是，如何处理时间间隔。以前的一般做法是使用定时器，每间隔1000ms/60的时间绘制一个canvas，这样能每秒显示60桢，动画应该很流畅。

html5目前大部分浏览器支持一种新的函数，比如chrome下：

window.webkitRequestAnimationFrame(callback)

其中callback是函数，是由你来实现的，用于绘制下一桢canvas。把这个函数传给webkitRequestAnimationFrame，它会统一来绘制。

目前除了Safari未实现这个函数（应该在不久的将来得到实现，因为最新开发中版本的webkit已经带这个函数），各个浏览器均实现了类似功能，为了统一处理，一般会写如下的函数：

window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

这个函数定义了统一的requestAnimFrame函数，它会检测，如果没有支持，比如Safari的情况，就使用定时器来实现这个功能。

实现动画的主要代码：

<script>
window.onload = function () {
var canvas = document.getElementById(‘myCanvas’);
canvas.width = 1024;
canvas.height = 768;
var context = canvas.getContext(’2d’);

window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

var image = new Image();
var x = 50, y = 10;

function animate() {
context.clearRect(0, 0, canvas.width, canvas.height);//清除canvas
context.drawImage(image, x++, y++, image.width, image.height);

window.requestAnimFrame(function () {
if (x > 1024) {
console.log(‘animate stop’);
return;
}
animate();
});
}

image.onload = function () {
context.drawImage(image, x, y, image.width, image.height);
animate();
};

image.src = ‘tank.gif’;
};

这里的animate函数被递归调用，直到坦克图片到达canvas边缘停止。

保存和恢复状态

一般动画会有背景，比如 类似这样：

 

这要求重新绘制坦克的时候，也要重新绘制后面的线。

canvas提供了save和restore状态的方法，可以把这想象为一个堆栈，save和restore是对当前绘制状态的保存和恢复。

不过，要注意的是，保存和恢复的是状态，而不是图形。比如可以保存线的坐标点，线的宽度，线的样式和线的颜色，这些是状态信息，但是restore的时候并不绘制它们，你还需要调用stroke方法来划线。这已经极大的简化了很多需要重复的劳动了。

主要代码：

<script>
window.onload = function () {
var canvas = document.getElementById(‘myCanvas’);
canvas.width=1024;
canvas.height=768;
var context = canvas.getContext(’2d’);

context.moveTo(100, 100);//移动到起点
context.lineTo(1024-100, 768-100);//从起点划线到端点
context.lineWidth = 10;//线的宽度
context.strokeStyle = “#ff0000″;//线的颜色
context.lineCap = “butt”;//端点边缘样式，默认是butt
context.stroke();//为线填充颜色，默认颜色黑
context.save();

window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

var image = new Image();
var x = 50, y = 10;

function animate() {
context.clearRect(0, 0, canvas.width, canvas.height);//清除canvas
context.restore();
context.stroke();
//            context.save();
context.drawImage(image,x++,y++,image.width,image.height);

window.requestAnimFrame(function(){
if(x>1024){
console.log(‘animate stop’);
return;
}
animate();
});
}

image.onload = function () {
context.drawImage(image,x,y,image.width,image.height);
animate();
};

image.src = ‘tank.gif’;
};

本文完整源代码可参见： https://github.com/MarshalW/CanvasDemo/tree/gh-pages