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 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- Hive综合HBase——经Hive阅读/书写 HBase桌子
社论: 本文将Hive与HBase整合在一起,使Hive能够读取HBase中的数据,让Hadoop生态系统中最为经常使用的两大框架互相结合.相得益彰. watermark/2/text/aHR0cDo ...
- 判断DAG图
拓扑排序O(E), bellman O(VE) , 使用邻接表的dfs O(V+E) ,floyd O(N*N*N) bellman算法只能判断是否存在负环. 所以可以先把权值全部设为-1 #in ...
- error: png.h not found.
跑php设备 --enable-mbstring --enable-ftp --enable-gd-native-ttf --with-openssl --enable-pcntl --enable- ...
- Matlab绘图-很详细，很全面
强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到 所需图形,这类函数称为高层绘图函数.此外,Matlab还提供 ...
- IT行业为什么没有进度
参加工作多年了,来来回回参与了N多项目,大部分都是政府性的招标项目.每个项目都是顺利进行验收,在这些验收过的项目中大部分都或多或少都有一定的时间延期,每个项目都能够和合同或者需求说明书对应的上,但是真 ...
- DB2 “The transaction log for the database is full” 存在的问题及解决方案
DB2在执行一个大的insert/update操作的时候报"The transaction log for the database is full.. "错误,查了一下文档是DB ...
- IE7，8，9兼容性处理
在IE7根据假设高度文本框中设置,则光标将不会被中心的方法如以下: 添加属性,如:style="line-height:32px\9";能够 假设一个页面有多个TAB交换的物品.而 ...
- 乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern)
原文:乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern) 作 ...
- NGUI简单背包系统的实现
一.利用txt文件存储游戏物品信息 首先在asset下创建一个txt文件,这里我们命名为objectsInfoList.txt,并将其拖放到unity Project视图中. 其中txt中我们先存放一 ...
- 解决Fedora升级时nvidia显卡问题
升级到新版Fedora后登录不了gnome 小编最近升级了Fedora 20到21,结果就如之前从Fedora 19升级到20时类似,又出问题了.Fedora你到底行不行... gnome登录不了 ...