HTML5 Canvas特性与基础绘图方法概述.pdfVIP

什么是Canvas

⚫Canvas是HTML5出现的新，像所有

DOM一样，拥有自己的属性、方法和

，其中就有绘图的方法，javaScript能够调

用它在网页上完成绘图

⚫Canvas也是HTML5中最强大的特性之一。

允许开发者使用动态和交互可视化方法在

Web上实现桌面应用程序的功能

注意：InternetExplorer8及更早的IE版本的

浏览器不支持canvas元素

创建Canvas

⚫canvas元素会在网页上创建一个空白区

域，然后通过API操作这个区域，与空白的

div元素相似，但用途完全不同

⚫默认情况下，创建的canvas元素没有边

框和内容

⚫语法：canvasid=canvaswidth=300

height=200/canvas

getContext方法

⚫在使用canvas元素时，要调用getContext()方法

，其目的是得到画布的绘图上下文。通过这个

，就可以使用其他的API进行绘图操作

⚫语法：

functioninitial(){

varelem=document.getElementById(canvas);

varctx=canvas.getContext(2d);

}

绘制矩形

⚫在准备好Canvas，就可以创建和绘制实际图

形了。API的工具非常广泛，包括创建图形、

颜色、文本等

⚫API中的一些方法支持在画布上直接绘图，但这些

方法专门用于绘制矩形形状，并且是唯一能够生产

基础形状的方法。要想绘制其他形状，就要组合使

用其他的绘图方法以及复杂路径

⚫绘制方法：(生成基础形状方法)：

—fillRect(x,y,width,height)

—strokeRect(x,y,width,height)

—clearRect(x,y,width,height)

绘制矩形(续1)

fillRect(x,y,width,height)

—绘制实心矩形

—x,y指定矩形左上角位置

—width,height其尺寸

⚫strokeRect(x,y,width,height)

—与前一个方法类似，绘制空心矩形

⚫clearRect(x,y,width,height)

—清除属性所指定的区域的像素。类似于矩形擦除器

绘制矩形（续2）

functioninitial(){

varcanvas=

document.getElementById(canvas);

varctxcanvas.getContext(2d);

ctx.strokeRect(100,100,120,120);

ctx.fillRect(110,110,100,100);

ctx.clearRect(120,120,80,80);

}

颜色

⚫在创建图形时，如果不设定颜色那么所有图形都会使用

默认颜色——纯黑色。

⚫可以通过以下属性指定