可以把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
相关推荐
HTML5Canvas的入门教程,方便初学之链接HTML5的最新标签使用
简单的Html5Canvas入门PPt教程
HTML5CANVAS初级入门教程.pdf
主要介绍了HTML5 Canvas入门学习教程,讲解了Canvas标签的基本使用及基本的JavaScript对Canvas的操作方式,需要的朋友可以参考下
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5canvas初级入门教程.pdf
HTML5环境下Canvas入门, 在Chrome或FF环境下可以预览, 些例说明了Canvas下可以随意的进行画图, 我的例子主要以带圆角的矩形及渐变颜色为例子
CANVAS FOR HTML5从入门到精通源码,包括基础、渐变、绘图、表格绘制、文本绘制、旋转与变形、动画的实现全套源码。
本教程适合H5 Canvas绘图的初学者阅读,丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法,能创建简单的动画,能检测捕捉鼠标动作。
<canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的 HTML元素。例如,他可以用于绘 图、制作图片的组合或者简单的动画(当然并不那么简单)。 Itcanfor instancebe used todraw graphs,make ...
html5 入门教程,主要讲解canvas
个人学习html5 canvas,使用canva画的各类图形和很适合入门的代码。内附效果截图
[HTML5绘图].(HTML5.Canvas).Steve.Fulton&Jeff.Fulton.文字版; Building Websites with HTML5 to Work with Mobile Phones; Rockable.Decoding.HTML5.2012.RETAIL.eBook-repackb00k; The Essential Guide...
玩转html5 的 canvas画图, canvas入门,简单介绍canvas。
Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。 Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为...
教程名称: HTML5入门中文视频教程(共10讲)【】HTML5入门视频教程(10)Web Workers【】HTML5入门视频教程(1)...HTML5入门视频教程(5)Canvas对象你的 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
原文比较简单明了,适合初学入门,跟着上面的代码 很快就能学会 HTML5 的 Canvas 基本的绘图功能。本文就是根据此文翻译而来,只不过原文中有些地 方个人感觉介绍得过于简单,因此结合其他相关材料,根据自己的理解...
《HTML5移动应用开发入门经典》首先讲解了HTML5的起源以及它为什么适用于移动设备,然后讲解了HTML5的基本元素以及所做的改进、canvas(画布)、视音频、微格式、微数据、拖曳等新增特性,还讲解了WebSocket、Web...
html5入门代码大全(源码) 包含audio、video、canvas 、communication、forms、geolocation、intro、offline、storage、websocket、workers