canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布

原标题：扫地僧 北邮 web 前端课程之 Canvas 画布

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

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

12.1 Canvas 概述

本规范描述了立即模式的 API 和为了在光栅风格的绘图区域内绘制 2 维矢量图形所必须的方法。其主要应用是 HTML5 规范定义的 canvas 元素。

12.1.1相关术语：

2D：二维，你们肯定懂的

3D：三维，你们也必然懂的

API：编程接口

Canvas interface element：实现了本规范定义的绘图方法和属性的元素，简言之，就是"canvas"元素。

Drawing context：绘图上下文，一个左上角为(0,0)的笛卡尔坐标平面，在本平面中往右则 x 坐标增加和往下方 y 坐标增加。

Immediate-mode:立即模式，一种绘图格式，当绘制完成后，所有的绘图结构将从内存中立即丢弃，本 API 即为此种图形绘制格式。

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

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

Raster：光栅风格，图形的一种风格，其由多行断开的图片（行）组成，每行都包含确定的像素个数。

Vector：矢量，你们懂的。

12.2Canvas 接口元素定义

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'); // 设置宽度

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

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

context.fillRect(100,0,50,50); // 画填充矩形

12.2.1 getContext()方法

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

本

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

context = canvas . getContext ( contextId )

方法返回一个指定 contextId 的上下文对象，如果指定的 id 不被支持，则返回 null，当前唯一被强制必须支持的是"2d" ，也许在将来会有

"3d" ，

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

12.2.2 toDataURL()方法

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

式，

格式如下：

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

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-1.html