- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
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
元素。如右
您可能关注的文档
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 01-WebGIS概述.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 02-WebGIS基础技术.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 03-WebGIS技术原理.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 04-WebGIS的Web服务.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 05-地图发布.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 06-WebGIS客户端开发.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 07-OpenLayers多源数据汇聚.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 08-OpenLayers进阶.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 09-移动GIS.pptx
- WebGIS原理及开发——基于开源框架的WebGIS技术 课件 10-三维WebGIS.pptx
原创力文档


文档评论(0)