笔者：本笃庆军

原文地址：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. [转]C#自定义开关按钮控件--附带第一个私活项目截图

    原文地址:http://www.cnblogs.com/feiyangqingyun/archive/2013/06/15/3137597.html 进入智能手机时代以来,各种各样的APP大行其道,手 ...

  2. Windows Phone开发（13）：如何规范用户的输入行为

    原文:Windows Phone开发(13):如何规范用户的输入行为 很多时候,我们对用户的操作或输入做一定程度的限制,以避免发生不必要的异常或错误,因此,对一些特殊的类型,进行输入限制是很有必要的. ...

  3. jQuery Ajax： $.post请求示例

    jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...

  4. uva live 4394 String painter 间隔dp

    // uva live 4394 String painter // // 问题是,在培训指导dp运动主题,乍一看,我以为只是一点点复杂 // A A磕磕磕,两个半小时后,.发现超过例子.然而,鉴于他 ...

  5. python可变交换性能优化

    离许多新的压力python性能优化见交换两个变量值可以使用 a,b = b,a 这样能够提高性能 >>> from timeit import Timer >>> ...

  6. Android 4.0新组件：GridLayout详细说明

    于Android 4.0(API 14)它提供了一个新的组件GridLayout,它继承自Linearlayout,用于执行网络格样式布局. 在某些方面,GridLayout与TableLayout和 ...

  7. PC2日记——坑爹的第一天2014/08/28

    我不想安慰自己说今天是因为第一次将pc2用于实际的比赛经验不足而导致的今天出现种种问题,我想说的是自从我開始干后台我所做的每一件事都是第一次,所以这绝对不是让自己免去责怪的理由:我想说的是假设我今天是 ...

  8. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

  9. SSH2.0编程 ssh协议过程实现（转）

    SSh协议: 全称为Secure Shell,即很安全的shell,主要目的是用来取代传统的telnet和r系列命令(rlogin,rsh,rexec等)远程登录和远程执行命令的工具,实现远程登录和远 ...

  10. UVa 572 Oil Deposits(DFS)

     Oil Deposits  The GeoSurvComp geologic survey company is responsible for detecting underground oil ...