WebGIS原理及开发 Canvas超全教程.pdf

CCaannvvaass超超全全教教程程

⼀⼀、、简简介介

canvas是⼀个可以使⽤脚本(通常为JavaScrpt)来绘制图形的HTML元素.例如,它可以⽤于绘制图表、制作图⽚构图或者制作简单的(以及不那

么简单的)动画.

canvas最早由Apple引⼊WebKt，⽤于MacOSX的Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都⽀持它。

⼆⼆、、兼兼容容性性处处理理

11..替替换换⽂⽂本本

canvas元素与mg标签的不同之处在于，就像video，audio，或者picture元素⼀样，很容易定义⼀些替代内容。由于某些较⽼的浏览

器（尤其是IE9之前的IE浏览器）或者⽂本浏览器不⽀持HTML元素canvas，在这些浏览器上你应该总是能展⽰替代内容。

这⾮常简单：我们只是在canvas标签中提供了替换内容。不⽀持canvas的浏览器将会忽略容器并在其中渲染后备内容。⽽⽀持canvas的

浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

举个例⼦，我们可以提供对canvas内容的⽂字描述或者是提供动态⽣成内容相对应的静态图⽚，如下所⽰：

canvasid=stockGraphwidth=150height=150

currentstockprice:$3.15+0.15

canvas

canvasid=clockwidth=150height=150

imgsrc=imagesclock.pngwidth=150height=150alt=

canvas

22..检检查查⽀⽀持持性性

替换内容是⽤于在不⽀持canvas标签的浏览器中展⽰的。通过简单的测试getContext()⽅法的存在，脚本可以检查编程⽀持性。上⾯的代码

⽚段现在变成了这个样⼦：

varcanvas=document.getElementById(tutorial);

if(canvas.getContext){

varctx=canvas.getContext(2d);

drawingcodehere

}else{

canvas-unsupportedcodehere

}

三三、、模模版版⾻⾻架架

这⾥的是⼀个最简单的模板，我们之后就可以把它作为之后的例⼦的起点。

html

head

titleCanvastutorialtitle

styletype=textcss

canvas{border:1pxsolidblack;}

style

head

bodyonload=draw();

canvasid=tutorialwidth=150height=150canvas

scripttype=textjavascript

functiondraw(){

varcanvas=document.getElementById(tutorial);

if(canvas.getContext){

varctx=canvas.getContext(2d);

drawingcodehere

}else{

canvas-unsupportedcodehere

}

}

script

body

html

上⾯的脚本中包含⼀个叫做draw()的函数，当页⾯加载结束的时候就会执⾏这个函数。通过使⽤在⽂档上加载事件来完成。只要页⾯加载结束，

这个函数，或者像是这个的，同样可以使⽤wndow.setTmeout()，wndow.setInterval()，或者其他任何事件处理程序来调⽤。

四四、、绘绘制制形形状状

11..栅栅格格

在我们开始画图之前，我们需要了解⼀下画布栅格（canvasgrd）以及坐标空间。上⼀页中的HTML模板中有个宽150px,⾼150px的canvas

元素。如右