《HTML5_Canvas_2D_API_¹æ·¶_1.0_ÖÐÎÄ°æ》.pdf

W3C Canvas 2D API 规范 1.0 by codeE Canvas 2D API 规范 1.0  （W3C Editor's Draft 21 October 2009 ） 翻译：CodeEx.CN2010/10/21 引用本文，请不要删掉翻译行，更多精彩，请访问： 原文请参看： /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 codeE 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 codeE Retained-mode：残留模式：另一种绘图格式，当绘制完成后，所有的绘 图结构仍在内存中残留，例如DOM、SVG即是此种绘制格式 Raster：光栅风格，图形的一种风格，其由多行断开的图片（行）组成， 每行都包含确定的像素个数 Vector：矢量，你们懂的 source-over operator ：我不懂，你们自己看吧 2 Canvas接口元素定义 DOM 接口： interface CanvasElement : Element { attribute unsigned long