首页 > 代码库 > 获取canvas绘图环境
获取canvas绘图环境
作者:卿笃军
原文地址:http://blog.csdn.net/qingdujun/article/details/32925369
我们用的最基本的绘图环境在canvas中绘图,通过调用canvas对象的getContext()方法来获取绘图环境。getContext()方法只需要一个参数:绘图环境的类型。在游戏中,我们使用2D类型的绘图环境。
获取canvas绘图环境
<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> <title>HTML5</title> <script type="text/javascript" charset = "utf-8"> //这个函数将在页面完全加载后调用 function pageLoaded() { //获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同 var canvas = document.getElementById('tCanvas'); //获取该canvas的2D绘图环境 var context = canvas.getContext('2d'); //绘制代码将出现在这里 } </script> </head> <body onl oad="pageLoaded();"> <canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;"> <!--如果浏览器不支持则显示如下字体--> 提示:你的浏览器不支持<canvas>标签 </canvas> </body> </html>
参考文献:(印)香卡(Shankar,A.R.)(作者).谢光磊(译者).HTML5游戏开发进阶指南[M].北京:电子工业出版社,2013.2-3.
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。