HTML5 获得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 onload="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.
版权声明：本文博客原创文章。博客，未经同意，不得转载。
HTML5 获得canvas油漆环境的更多相关文章
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- 浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- 从lca到树链剖分 bestcoder round#45 1003
bestcoder round#45 1003 题,给定两个点,要我们求这两个点的树上路径所经过的点的权值是否出现过奇数次.如果是一般人,那么就是用lca求树上路径,然后判断是否出现过奇数次(用异或) ...
- 为VS2013添加SQLCE的支持
解决 下载SQL Server Compact Toolbox by ErikEJ并安装 打开VS2013,新建一工程,在“视图>其它窗口>SQL Server Compact Toolb ...
- linux下多进程的调试
linux下多进程的调试: (1)follow-fork-mode set follow-fork-mode [parent | child] ---- fork之后选择调试父进 ...
- linux grep命令详解（转）
简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...
- Cocos2d-x 脚本语言Lua中的面向对象
Cocos2d-x 脚本语言Lua中的面向对象 面向对象不是针对某一门语言,而是一种思想.在面向过程的语言也能够使用面向对象的思想来进行编程. 在Lua中,并没有面向对象的概念存在,没有类的定义和子类 ...
- 元素z-index继承问题
两同层元素.当中一个的子元素定位与还有一个重叠时,该子元素被覆盖(此时子元素的z-index继承的是其父元素的z-index,不管其z-index多少均被覆盖) <html> <he ...
- 【原创】poj ----- 1182 食物链 解题报告
题目地址: http://poj.org/problem?id=1182 题目内容: 食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submi ...
- 移植 libuv 至 Visual C++ 6.0 并支持 Windows XP 编译系统
移植版本 libuv:https://github.com/liigo/libuv-vc6 (支持VC6和XP.作者Liigo). 我从一年前(大概2013年6,7月份)開始在业余时间做这项移植工作, ...
- Java 序列化Serializable详解（附详细例子）
Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization ...
- DV工作流