HTML5 Canvas概述


Posted in HTML / CSS onAugust 26, 2009

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些<canvas>的应用示例,我们将会在此教程中看到他们的实现。

<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

在本教程中,我将试着讲述如何在你自己的网页中使用<canvas>元素。提供的示例应该会给你些清晰概念,即用<canvas>能做些什么的。这些示例也可作为你应用<canvas>的起点。

开始使用之前
用元素<canvas>并不难,只要你具有HTML和 JavaScript的基础知识。

如上所述,并不是所有现代浏览器都支持<canvas>元素,所以你需要 Firefox 1.5或更新版本、或者其他基于Gecko的浏览器例如Opera 9、或者最近版本的Safari才能看到所有示例的动作。

<canvas>元素

Let's start this tutorial by looking at the <canvas> element itself.
让我们从<canvas>元素的定义开始吧。

<canvas id="tutorial" width="150" height="150"></canvas>

This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. <canvas>看起来很像<img>,唯一不同就是它不含 srcalt 属性。The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS rules.它只有两个属性,widthheight,两个都是可选的,并且都可以 DOM 或者 CSS 来设置。 When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.如果不指定width 和 height,默认的是宽300像素高150像素。The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.   (If your  renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not with CSS.)虽然可以通过 CSS 来调整canvas的大小,但渲染图像会缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width 和 height 属性值)。

The id attribute isn't specific to the <canvas> element but is one of default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.
id  属性不是<canvas>专享的,就像标准的HTLM标签一样,任何一个HTML元素都可以指定其 id 值。一般,为元素指定 id 是个不错的主意,这样使得在脚本中应用更加方便。

The <canvas> element can be styled just like any normal image (margin, border, background, etc). These rules however don't affect the actual drawing on the canvas. We'll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent. <canvas>元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式,canvas默认是全透明的。

替用内容

Because the <canvas> element is still relatively new and isn't implemented in some browsers (such as Firefox 1.0 and Internet Explorer), we need a means of providing fallback content when a browser doesn't support the element.

因为 <canvas> 相对较新,有些浏览器并没实现,如Firefox 1.0 和 Internet Explorer,所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.
For instance we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:

我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容,而支持的浏览器则会正常地渲染canvas。例如,我们可以把一些文字或图片填入canvas内,作为替用内容:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150"/>
</canvas>

结束标签 </canvas> 是必须的

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation requires an end tag (</canvas>).

在Apple Safari里,<canvas>的实现跟<img>很相似,它并不没有结束标签。然而,为了使 <canvas> 能在web的世界里广泛适用,需要给替用内容提供一个容身之所,因此,在Mozilla的实现里结束标签(</canvas>)是必须的。

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

如果没有替用内容,<canvas id="foo" ...></canvas> 对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

如果有替用内容,那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容,因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。

渲染上下文(Rendering Context)

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context, which is the only currently defined rendering context. In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will be added.

<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上,这也是目前唯一的选择,可能在将来会添加基于OpenGL ES 的 3D 上下文。

The <canvas> is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.

<canvas> 初始化是空白的,要在上面用脚本画图首先需要其渲染上下文(rendering context),它可以通过 canvas 元素对象的 getContext 方法来获取,同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。

检查浏览器的支持

The fallback content is displayed in browsers which do not support <canvas>; scripts can also check for support when they execute. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:

除了在那些不支持  的浏览器上显示替用内容,还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单,判断 getContext 是否存在即可。

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

代码模板

Here is a minimalistic template, which we'll be using as a starting point for later examples. You can download this file to work with on your system.

我们会用下面这个最简化的代码模板来(后续的示例需要用到)作为开始,你可以 下载文件 到本地备用。

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

If you look at the script you'll see I've made a function called draw, which will get executed once the page finishes loading (via the onload attribute on the body tag). This function could also have been called from a setTimeout, setInterval, or any other event handler function just as long the page has been loaded first.

细心的你会发现我准备了一个名为 draw 的函数,它会在页面装载完毕之后执行一次(通过设置 body 标签的 onload 属性),它当然也可以在 setTimeout,setInterval,或者其他事件处理函数中被调用。

一个简单的例子

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

作为开始,来一个简单的吧——绘制两个交错的矩形,其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>
HTML / CSS 相关文章推荐
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
HTML5 canvas 基本语法
Aug 26 #HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 #HTML / CSS
HTML5 解析规则分析
Aug 14 #HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 #HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 #HTML / CSS
HTML5 新事件 小结
Jul 16 #HTML / CSS
html5 标签
Jul 16 #HTML / CSS
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php获取参数的几种方法总结
2014/02/18 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
简单了解OpenCV是个什么东西
2017/11/10 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python 如何对logging日志封装
2020/12/02 Python
Python页面加载的等待方式总结
2021/02/28 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
电气专业应届生求职信
2013/11/01 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
元旦活动感言
2014/03/08 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
学术会议通知
2015/04/15 职场文书
redis限流的实际应用
2021/04/24 Redis
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python