博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Canvas tutorial

Posted on 2015-03-23 08:45  sunjie  阅读(295)  评论(0编辑  收藏  举报

<canvas> 是一种可以通过编写脚本(通常是JavaScript)来实现绘制图形的HTML元素。例如,它能用来绘制图形,制作组合图像或者生成简单的 (偶尔 也不简单) 动画。右边的图像展示了<canvas>实现的一些例子,在接下来的教程中我们将会实现它们。

<canvas>第一次出现是被苹果在Mac OS X仪表盘中实现,之后就被应用到Safari和谷歌Chrome中。Gecko1.8及以上的浏览器,比如火狐1.5,同样也支持这个元素。<canvas>标签是WhatWG Web applications 1.0标准化即HTML5的一部分。本教程从基础入手,讲述了如何使用<canvas>标签来绘制2D图像。提供的例子应该会使你了解你能够通过canvas做到的事情并且将会提供一些帮助你开始建立自己的内容的代码片段。

 

在你开始之前

使用<canvas>元素并没有你想象的那么难,但是你仍然需要对HTMLJavaScript有一定的了解。<canvas>元素在某些过旧的浏览器中是不被支持的,但是所有主流浏览器的最新版本都已经支持了该元素。canvas的默认大小是300像素*150像素(宽*高)。但是可以通过使用CSS宽高属性来自定义其大小。为了在canvas中绘制图像我们会使用一个javascript 上下文对象(javascript context object这应该如何翻译),它将会创建一个动态图像。

 

教程内容

相关资料

A note to contributors

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.