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 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- jquery实现仿select列表的即时搜索及拼音搜索
这里提到select,其实不是select,而是用<li><input>标签去仿造一个select,以实现对已有“option”的快速检索功能. 以<input>标 ...
- Java4Android之BlockingQueue
在研究Smack的源码的时候,我对它的连接Connection以及派生类XMPPConnection的关注是最多的,由于一个即时通信程序,它的网络模块必是它的核心. 而我非常在乎它是怎样实现的. 在收 ...
- Git使用摘要
svn过渡到git流程.使用我一直git svn场景,对于遇到的一些问题,并经常使用的功能来概括: 1.git svn出口: git svn clone "svn通路" 2.git ...
- 【ArcGIS 10.2新特性】ArcGIS 10.2 for Desktop 新特性（一）
ArcGIS 10.2 for Desktop是在10.1的成功基础上进行的改进,它的改进包括:性能提升.附加的安全性.40多个新的分析工具.3D功能提高.栅格增强.新的地理数据管理能力以及其它更多的 ...
- 用C设计，用C++编码
昨天晚上看到刘江的blog又补充了好几大段,今天早上又看到云风的人肉trackback,果然还是这种话题引人关注. 云风先是提了一下所谓C++带来的思想包袱(文言文曰“心智包袱”)问题,然 ...
- linux下一个C语言flock功能使用 .
表头文件 #include<sys/file.h> 定义函数 int flock(int fd,int operation); 函数说明 flock()会依參数operation所指 ...
- Ubuntu常用软件推荐，图文详细说明及下载
抛开Windows,其实在任何一款Linux发行版本中,我们都有超级大量的软件来安装,使用.这次的教程,我就以Ubuntu为例,来给大家推荐一些我认为不错的软件 声明: 1.本文提到的全部软件,都在文 ...
- SQL在declare声明变量
在sql添加的声明变量. declare @local_variable data_type 你需要指定一个变量声明的类型, 能够使用set和select对变量进行赋值, 在sql语句中就能够使用@l ...
- mysqldump: Couldn't execute 'show events': Cannot proceed because system tables used by Event Schedu
最近将老版本的mysql 实例倒入 percona 5.5.30,使用的是线上的全备,结果将mysql 库下的表也倒入了,这下可悲剧了,备份报错. 没办法,将mysql库下的数据倒出来,清空,再倒入p ...
- zoj3829 Known Notation --- 2014 ACM-ICPC Asia Mudanjiang Regional Contest
根据规则,可以发现,一*之前必须有至少2数字.一(11*)这反过来可以被视为一数字. 因此,总位数必须大于*号码,或者你会加入数字. 添加数字后,,为了确保该解决方案将能够获得通过交流.那么肯定是*放 ...