- 1、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
基于HTML5 canvas绘图技术研究.doc
基于HTML5 canvas绘图技术研究 摘 要:目前,互联网正处于突飞猛进的发展阶段,W3C的HTML工作组于去年10月28日推出的HTML5推荐标准(W3C Recommendation)将逐渐成为下一代web标准,其中新增的Canvas元素及相应的API编程接口,结合javascript代码,可实现动态绘图并加以渲染。本文主要阐述了运用HTML5 Canvas元素在HBuilder可视化工具实现基本图形绘制,分析其实现方法和步骤。 关键词:HTML5;Canvas;Javascript;API;HBuilder 1 概述 W3C(万维网联盟)的HTML工作组终于在去年10月28日正式发布了HTML5的正式推荐标准(W3C Recommendation)。相信在不久的将来,HTML5标准将会逐渐取代1999年制定的HTML?4.01和XHTML?1.0两个html标准,以符合当代的网络需求,为桌面平台和移动平台之间带来无缝衔接的丰富内容。HTML5带来了一组新的用户体验,如Web的音频和视频不再需要插件,通过Canvas更灵活的完成图像绘制,而不必考虑屏幕的分辨率,浏览器对可扩展矢量图(SVG)和数学标记语言(MathML)的本地支持,通过引入新的注释信息以增强对东亚文字呈现(Ruby)的支持,对富Web应用信息无障碍新特性的支持,等等[1]。Canvas元素最先由苹果公司的Safari浏览器引入,用于在Mac OS X WebKit中创建控制板部件(dashboard widget),在HTML5 Canvas元素没有推出之前,web开发人员实现web绘图往往是通过SVG、VML等技术,但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求,比如Web游戏所需要的像素级别的绘图能力。HTML5提供了Canvas标记元素来实现绘图功能。该元素可以使用浏览器脚本语言(通常是JavaScript)调用Canvas自带的函数(即方法)进行图形绘制,和对图像的像素级操作。相较于传统的在服务器端先画好图片,再把图片发到浏览器中,或用第三方插件显示的方式,它与浏览器渲染引擎结合紧密,节约了资源,并极大地简化了图形和网页中其他元素的交互过程[2]。目前该元素已被加入HTML5标准的草案,并且得到了所有主流浏览器的支持。本文详细介绍在可视化开发工具HBuilder中利用HTML5 Canvas元素实现绘制基本图形方法和步骤。 2 可视化开发工具HBuilder介绍 目前主流的前端编码工具有windows记事本为代表的文本编辑器,以及Webstorm、Brackets、Dreamweaver、Microsoft Visual Studio 2008/2012 等IDE(集成开发环境)。但适合HTML5设计的,只有HBuilder、Webstorm和Brackets。 Hbuilder(飞一样的编码)是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE,官方网站为http://www.dcloud.io。截止发稿时,Hbuilder for windows最高版本号为HBuilder 01507202206, 支持在线更新。DCloud是W3C成员及HTML5中国产业联盟发起单位。DCloud CEO王安表示,“HBuilder最大的优势就是快,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率”[3]。 3 基本图形绘制 3.1 构建Canvas元素 使用HTML5 Canvas绘制图形比较简单,首先需要在HTML页面中创建一个Canvas元素,目的是充当2D渲染上下文的封装,绘图是在2D渲染上下文中进行,而不是在canvas元素中。例如代码可表示如下: 您的浏览器不支持canvas! 这样页面上就定义了一块400px×300px的画布,要想显示其范围,可以通过属性设置为这块区域添加边框或背景。如果不设置width(宽度)和height(高度)两属性,则默认为宽为300px,高为150px。如果浏览器不支持这个API,则就会显示“您的浏览器不支持canvas!”。 每个canvas元素都有一个对应的context对象(上下文对象),Canvas API定义在这个context对象上面,所以需要获取这个对象,方法是使用getContext方法。 var canvas= document.getElementById(“mycanvas”); if (canvas.getContext) { var context= canvas.getC
文档评论(0)