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

Comments are closed.