HTML5Canvas2DAPI规范1.0资源-CSDN文库

HTML5,Canvas

需积分: 10 7 浏览量 2013-06-08 13:58:11 上传评论收藏 565KB PDF 举报

资源推荐

资源详情

资源评论

W3C Canvas 2D API 规范 1.0 by codeEx.cn

Canvas2DAPI 规范 1.0

（W3C Editor's Draft 21 October 2009）

翻译：CodeEx.CN2010/10/21

引用本文，请不要删掉翻译行，更多精彩，请访问：www.codeex.cn

原文请参看：

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html



摘要................................................................2

1 介绍 ..........................................................2

1.1 术语： ........................................................2

2 CANVAS接口元素定义 ............................................3

2.1 GETCONTEXT()方法 ..............................................3

2.2 TODATAURL()方法 ...............................................3

3 二维绘图上下文 ................................................4

3.1 CANVAS的状态 ..................................................7

3.2 转换(TRANSFORMATIONS) .........................................8

3.3 合成（COMPOSITING） ..........................................10

3.4 颜色和风格 ...................................................12

3.5 线风格 .......................................................16

3.6 阴影(SHADOWS) ................................................18

3.7 简单形状（矩形） .............................................18

3.8 复杂形状(路径-PATHS) .........................................19

3.8.1 路径起始函数................................................19

3.8.2 绘制函数....................................................19

3.8.3 辅助方法—点是否在路径里....................................22

3.8.4 MOVETO方法..................................................22

第 1 页共 30 页

W3C Canvas 2D API 规范 1.0 by codeEx.cn

3.8.5 LINETO方法..................................................22

3.8.6 RECT方法....................................................22

3.8.7 圆弧........................................................23

3.8.8 最短圆弧....................................................24

3.8.9 二次方、三次方贝塞尔曲线....................................24

3.9 文字 .........................................................25

3.10 绘制图片....................................................26

3.11 像素级操作..................................................27

3.11.1 CREATEIMAGEDATA方法.........................................28

3.11.2 GETIMAGEDATA方法............................................28

3.11.3 PUTIMAGEDATA方法............................................28

3.11.4 演示例子 ..................................................28

3.12 绘图模型【此段翻译不怎么样，可以参看原英文】................29

4 参考资料 .....................................................29



摘要

本规范定义了二维 Canvas（画布）的绘画 API，使用这些 API 使得可以

在 Web 页面上进行立即模式的二维图形绘制。

1 介绍

本规范描述了立即模式的

API 和为了在光栅风格的绘图区域内绘制 2 维

矢量图形所必须的方法。其主要应用是 HTML5 规范定义的 canvas 元素。

1.1 术语：

2D：二维，你们懂的

3D：三维，你们懂的

API：编程接口

Canvas interface element：实现了本规范定义的绘图方法和属性的元

素，简言之，就是“canvas”元素

Drawing

context：绘图上下文，一个左上角为(0,0)的笛卡尔坐标平面，

在本平面中往右则 x 坐标增加和往下方 y 坐标增加

Immediate-mode:立即模式，一种绘图格式，当绘制完成后，所有的绘图

结构将从内存中立即丢弃，本 API 即为此种图形绘制格式

第 2 页共 30 页

W3C Canvas 2D API 规范 1.0 by codeEx.cn

Retained-mode：残留模式：另一种绘图格式，当绘制完成后，所有的绘

图结构仍在内存中残留，例如 DOM、SVG 即是此种绘制格式

Raster：光栅风格，图形的一种风格，其由多行断开的图片（行）组成，

每行都包含确定的像素个数

Vector：矢量，你们懂的

source-over operator ：我不懂，你们自己看吧

2 Canvas接口元素定义

DOM 接口：

interface CanvasElement : Element {

attribute unsigned long width;

attribute unsigned long height;

Object getContext(in DOMString contextId);

DOMString toDataURL(optional in DOMString type, in any

args);

};

这里 width 和 height 必须是非负值，并且无论什么时候重新设置了

width 或 height 的值，画布中任何已绘对象都将被清除，如下所示的 JS 代

码中，仅仅最后一个矩形被绘制：

// canvas is a reference to a <canvas> element

var context = canvas.getContext('2d');

context.fillRect(0,0,50,50);

canvas.setAttribute('width', '300'); // clears the canvas

context.fillRect(0,100,50,50);

canvas.width = canvas.width; // clears the canvas

context.fillRect(100,0,50,50); // only this square remains

2.1 getContext()方法

为了在 canvas 上绘制，你必须先得到一个画布上下文对象的引用，用本

方法即可完成这一操作，格式如下：

context = canvas . getContext(contextId)

方法返回一个指定 contextId 的上下文对象，如果指定的 id 不被支持，

则返回 null，当前唯一被强制必须支持的是“2d”，也许在将来会有“3d”，

注意，指定的 id 是大小写敏感的。

2.2 toDataURL()方法

此函数，返回一张使用 canvas 绘制的图片，返回值符合 data:URL 格式，

格式如下：

url = canvas . toDataURL( [ type, ... ])

规范规定，在未指定返回图片类型时，返回的图片格式必须为 PNG 格式，

第 3 页共 30 页

剩余29页未读，继续阅读

评论收藏

内容反馈

relucent

粉丝: 10
资源: 8

HTML5 Canvas 2D API 规范 1.0

最新资源