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 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- Thinkpad X200 屏幕备案
妈妈蛋,屏幕废物前几天(闪屏->暗->变暗),因此,它只能监视房外 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk2NTg5MA= ...
- 部署 Redis 群集
Windows 部署 Redis 群集 1,下载Redis for windows 的最新版本,解压到 c:\Redis 目录下备用https://github.com/MSOpenTech/re ...
- python学习笔记之九：模块和包
Python的标准安装包括一组模块,称为标准库.这里介绍模块的工作方式,学习如何使用它们. 一. 模块 1.1 用import从外部模块获取函数并为自己的程序所用: >>> from ...
- 使用Visual Studio 2010 创建简单的Silverlight应用程序
使用Visual Studio 2010 创建简单的Silverlight应用程序 Silverlight是创建动态的引人的RIAs(Rich Internet Application)的新方法.这里 ...
- uva10465（完全背包，要求装满背包）
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&c ...
- java实现代理domino web邮件下载
[背景] 近日在研究domino web邮件下载功能,下载的邮件能够导入foxmail.outlook邮件client,下载的邮件格式为eml. [參考代码](须要下载jmail.jar包) priv ...
- Cstyle的UEFI导读：第20.0篇 IGD OpRegion interface && IGD OpRegion PROTOCOL
ACPI IGD OpRegion interface是用SCI来实现IGD driver,OS,BIOS之间沟通的桥梁,IGD OpRegion PROTOCOL是UEFI BIOS构建桥梁 ...
- 看PHP在内部迭代的动作
以下我们来了解怎样实现一个自己定义的迭代器,然后再開始慢慢理解迭代器的内部工作原理.先来看一个官方的样例: <? php class myIterator implements Iterator ...
- BrowserSync使用
在Gulp中使用BrowserSync 2016-02-24 23:47 by 那时候的我, 116 阅读, 0 评论, 收藏, 编辑 博客已迁移至http://lwzhang.github.io. ...
- windows Azure平台开发
rest api 和SDK power shell azure pack