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 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- Phpcms所有系统变量列表 Phpcms V9 文件目录结构
Phpcms所有系统变量列表 用户变量: view plaincopy to clipboardprint? $_userid 用户id $_username 用户名 $_areaid ...
- ecshop购物流程中去掉email邮箱
首先打开includes\lib_order.php,在第1688行左右找到并删除 !empty($consignee['email']) && 接着打开js\shopping_flo ...
- 【前段开发】行内元素和块级元素总结（HTML CSS）
块级元素 <address> information on author <blockquote> long quotation <button> push but ...
- 上传App时遇IDFA错误问题
今天上传App时遇到下图1的情况,很纳闷,又是苹果新规. 通常是第三方的库引起啦,马上想到百度统计了,打开SDK下载页面看看简单介绍,里面有讲到这个问题了. 图2就是这次改动的原因. 更新SDK,之前 ...
- linux设备驱动程序第四部分：从如何定位oops对代码的调试方法，驱动线
在一个我们谈到了如何编写一个简单的字符设备驱动程序,我们不是神,编写肯定会失败的代码,在这个过程中,我们需要继续写代码调试.在普通c应用.我们经常使用printf输出信息.或者使用gdb要调试程序,然 ...
- const使用摘要
const在四种方案如以下: int b = 500; const int *a = &b; ①(底层const) int const *a = &b; ②(底层const) int ...
- hdu3501
要我们求小于n并且不与n互素的数字的和, 那么可以转化为1->(n-1)的和减去小于n且与n互素的数字的和 首先,有gcd(n,i)=1, 那么gcd(n,n-i)=1, 这是因为如果a%s=0 ...
- Java EE (6) -- Java EE 5 Enterprise Architect Certified Master
Section 1: Application Design Concepts and Principles Explain the main advantages of an object-orien ...
- VMware vSphere 服务器虚拟化之十八桌面虚拟化之安装View Composer服务器
VMware vSphere 服务器虚拟化之十八桌面虚拟化之安装View Composer服务器 View Compose服务可安装在管理虚拟机的vC ...
- struts2在<s:select>用动态标签
后台传过来的必要性userlist成为一个下拉菜单.因此,认为使用<s:select>.但设置了很久设置的属性,在这个下跌. JSP代码: <s:select label=" ...