HTML5画布教程_原创文档.pdfVIP

HTML5画布基础教程

一、HTML5画布HTML5Canvas

1.1画布元素CanvasElement

HTML5Canvas元素是类似于div、a或table标记的HTML标记，其内容可通过JavaScript渲染呈现。要

使用HTML5画布，首先要在HTML文档内添加canvas标签，然后使用JavaScript访问canvas对象，并创建

canvas的上下文（context）对象，通过调用HTML5画布API方法绘制可视化内容。

在使用canvas时，理解canvas元素和canvas上下文之间的差异是很重要的。canvas元素是嵌入在HTML页

面中的实际DOM节点，canvas上下文对象是一个具有属性和方法的对象，通过调用canvas上下文对象的属

性和方法在画布元素内绘制、渲染图形。上下文可以是2D或WebGL（3D）。

每个canvas元素只能有一个上下文对象，如果我们多次调用getContext()方法，它将返回对同一个上下文对

象的引用。

!DOCTYPEHTML

html

head

style

body{

margin:0px;

padding:0px;

}

/style

/head

body

canvasid==width==height==/canvas

script

varcanvas=document.getElementById(myCanvas);

varcontext=canvas.getContext(2d);

//docoolthingswiththecontext

context.font=40ptCalibri;

context.fillStyle=blue;

context.fillText(HelloWorld!,150,100);

/script

/body

/html

以上代码演示了在画布上绘制蓝色的HelloWorld文字。

二、线条Lines

2.1直线Line

要在画布上绘制线条，可以通过调用：beginPath()、moveTo()、lineTo()和stroke()方法来实现。

首先，我们可以使用beginPath()方法来声明我们即将绘制一个新的路径。接下来，我们可以使用moveTo()

方法定位上下文对象的绘图起点（即绘图光标），然后使用lineTo()方法从起始位置绘制一条直线到一个新

的位置。最后，为了使线条可见，调用stroke()方法将线条绘制出来。除非另有声明，否则笔划颜色默认为

黑色。

!DOCTYPEHTML

html

head

style

body{

margin:0px;

padding:0px;

}

/style

/head

body

canvasid==width==height==/canvas

script

varcanvas=document.getElementById(myCanvas);

varcontext=canvas.getContext(2d);

context.beginPath();

context.moveTo(100,150);

context.lineTo(450,50);

context.stroke();

/script

/body

/html

以上代码演示了在画布上绘制一段黑色的直线。

2.2线条宽度LineWidth

如果要改变绘制线条的宽度，可以使用画布上下文对象的lineWidth属性，但是必须先设置lineWidth属性，

然后调用stro