PDF《使用 Canvas 画图》

第5章 使用 Canvas 画图 HTML4 的画图能力很弱,通常只能在网页中显示指定的图像文件.

HTML5 提供了 Canvas 元素,可以在网页中定义一个画布,然后使用 Canvas 绘图方法在画布中画图.在 游戏开发中大量使用 Canvas 画图.本章介绍在 HTML5 中如何使用 Canvas 画图. 5.1 Canvas 元素 Canvas 就是画布, 可以进行画任何的线、 图形、 填充等一系列的操作. Canvas 是HTML5 出现的新元素,它有自己的属性、方法和事件,其中就有绘图的方法,JavaScript 能够调用 Canvas 绘图方法来进行绘图.另外 Canvas 不仅仅提供简单的二维矢量绘图,也提供了三 维的绘图,以及图片处理等一系列的 API 支持. 5.1.1 Canvas 元素的定义语法 Canvas 元素的定义语法如下: … Canvas 元素的常用属性如下: id 是Canvas 元素的标识;

height 是Canvas 画布的高度,单位为像素;

width 是Canvas 画布的宽度,单位为像素. 例如在 HTML 文件中定义一个 Canvas 画布,id 为myCanvas,高和宽各为

100 像素, 代码如下: 您的浏览器不支持 canvas. 和之间的字符串指定当浏览器不支持 Canvas 时显示的字符串. 注意: Internet Explorer

9、 Firefox、 Opera、 Chrome 和Safari 支持 Canvas 元素. Internet Explorer

8 及其之前版本不支持 Canvas 元素. 5.1.2 使用 JavaScript 获取网页中的 Canvas 对象 在JavaScript 中,可以使用 document.getElementById()方法获取网页中的对象,语法 如下: document.getElementById(对象 id) 源码下载 HTML5 网页游戏设计从基础到开发

90 例如,获取定义的 myCanvas 对象的代码如下: 您的浏览器不支持 canvas. var c=document.getElementById("myCanvas");

得到的对象 c 即为 myCanvas 对象.要在其中绘图还需要获得 myCanvas 对象的 2d 上 下文对象,代码如下: var ctx=c.getContext("2d");

//获得 myCanvas 对象的 2d 上下文对象 Canvas 绘制图形都是依靠 Canvas 对象的上下文对象.上下文对象用于定义如何在画 布上绘图.顾名思义,2d 上下文支持在画布上绘制 2D 图形、图像和文本. 5.2 坐标与颜色 5.2.1 坐标系统 在实际的绘图中,我们所关注的一般都是指设备坐标系,此坐标系以像素为单位,像 素指的是屏幕上的亮点.每个像素都有一个坐标点与之对应,左上角的坐标设为(0,0) , 向右为 X 正轴,向下为 Y 正轴.一般情况下以(x,y)代表屏幕上某个像素的坐标点,其 中水平以 X 坐标值表示,垂直以 Y 坐标值表示.例如,在图 5-1 所示的坐标系统中画一个 点,该点的坐标(x,y)是(4,3) . 图5-1 Canvas 坐标的示意图 计算机作图是在一个事先定义好的坐标系统中进行的,这与日常生活中的绘图方式有 着很大的区别.图形的大小、位置等都与绘图区或容器的坐标有关. 5.2.2 颜色的表示方法 1.颜色关键字 W3C 的HTML 4.0 标准仅支持

16 种颜色名,它们是 aqua、black、blue、fuchsia、 gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow.如果 需要使用其他的颜色,需要使用十六进制的颜色值. 第5章使用 Canvas 画图

91 2.十六进制颜色值 可以使用一个十六进制的字符串表示颜色,格式为#RGB.其中,R 表示红色分量,G 表示绿色分量,B 表示蓝色分量.每种颜色的最小值是 0(十六进制:#00) .最大值是

255 (十六进制: #FF) . 例如#FF0000 表示红色, #00FF00 表示绿色, #0000FF 表示蓝色, #A020F0 表示紫色,#FFFFFF 表示白色,#000000 表示黑色. 3.RGB 颜色值 RGB 颜色值可以使用如 rgb(红色分量,绿色分量,蓝色分量)形式表示颜色.表5-1 是十 六进制字符串表示颜色与 RGB 颜色值的对照表. 表5-1 十六进制颜色值与 RGB 颜色值对照表 Color HEX Color RGB 颜色 Color HEX Color RGB 颜色 #000000 rgb(0,0,0) 黑色 #00FFFF rgb(0,255,255) 青色 #FF0000 rgb(255,0,0) 红色 #FF00FF rgb(255,0,255) 深红 #00FF00 rgb(0,255,0) 绿色 #C0C0C0 rgb(192,192,192) 灰色 #0000FF rgb(0,0,255) 蓝色 #FFFFFF rgb(255,255,255) 白色 #FFFF00 rgb(255,255,0) 黄色 #FF8000 rgb(255,128,0) 桔黄 5.3 绘制图形 5.3.1 绘制直线 在JavaScript 中可以使用 Canvas API 绘制直线,具体过程如下: (1)在网页中使用 Canvas 元素定义一个 Canvas 画布,用于绘画. var c=document.getElementById("myCanvas");