笔者：本笃庆军

原文地址：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油漆环境的更多相关文章

  1. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  2. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  3. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  4. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  5. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  7. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  8. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  9. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. HDU 2828 DLX搜索

    Lamp Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  2. 矩阵快速幂---BestCoder Round#8 1002

    当要求递推数列的第n项且n很大时,怎么快速求得第n项呢?可以用矩阵快速幂来加速计算.我们可以用矩阵来表示数列递推公式比如fibonacci数列 可以表示为 [f(n)   f(n-1)] = [f(n ...

  3. Oracle安装过程物理内存检查及临时temp空间不足解决办法

    物理内存 – 此先决条件将测试系统物理内存总量是否至少为 922MB (944128.0KB). 预期值 : N/A 实际值 : N/A 错误列表: – 可用物理内存 PRVF-7531 : 无法在节 ...

  4. poj 2253 Frogger (最长路中的最短路)

    链接:poj 2253 题意:给出青蛙A,B和若干石头的坐标,现青蛙A想到青蛙B那,A可通过随意石头到达B, 问从A到B多条路径中的最长边中的最短距离 分析:这题是最短路的变形,曾经求的是路径总长的最 ...

  5. The app references non-public selectors in payload With Xcode6.1

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: p=591" style="color: rgb(255, 97, 0 ...

  6. Windows IOT

    Windows IOT 开发入门(准备工作)   终于抽出空来了,将最近研究的东西记录下来,物联网,万物皆可联网.然后可以做到智能家居,智能生活,智能城市....一大堆.吹牛的就不说了. 在实际应用中 ...

  7. OpenStack_Swift源代码分析——Ring基本原理及一致性Hash算法

    1.Ring的基本概念 Ring是swfit中最重要的组件.用于记录存储对象与物理位置之间的映射关系,当用户须要对Account.Container.Object操作时,就须要查询相应的Ring文件( ...

  8. unrecognized selector sent to instance 0x10b34e810

    一个错误: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSURLEr ...

  9. C++ 版本的split_string

    vector<string> split_string(const string &in, char del, bool skip_empty) { vector<strin ...

  10. CoreGraphics QuartzCore CGContextTranslateCTM 说明

    CoreGraphics.h 一些经常使用旋转常量 #define M_E 2.71828182845904523536028747135266250 e 
#define M_LOG2E 1.442 ...