html5 canvas入门

标签: 计算机技术 html5 html5 canvas javascript | 发表时间:2012-02-24 07:17 | 作者:Marshal
出处:http://marshal.easymorse.com

可以把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

相关 [html5 canvas] 推荐:

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置.

备份:html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自:http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象.

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说,如果上下文不存在的话,Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法.

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分,允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端,使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.

HTML5 Canvas(画布)教程 – 图像处理

- - Web前端 - ITeye博客
Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前,人们要想实现动态的网页应用,只能借助于第三方的 插件,比如Flash或Java,而引入了Canvas标记后,人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.

html5 canvas 详细使用教程

- - CSDN博客Web前端推荐文章
图形变形(平移、旋转、缩放). 矩阵变换(图形变形的机制). 绘制图像(图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]). 保存和恢复状态(context). 结合setInterval制作动画.      是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验.

走进 HTML5:20个惊艳的 HTML5 Canvas 应用试验

- - 博客园_梦想天空
如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐. 很多 Web 开发者也尝试着用. HTML5 来制作各种 Web 应用. HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过. JavaScript 绘制图形的方法,非常强大.