HTML5通过调用canvas对象的getContext()方法来获取绘图环境


Posted in HTML / CSS onJune 23, 2014

我们用的最基本的绘图环境在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>
HTML / CSS 相关文章推荐
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 #HTML / CSS
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python爬取国外天气预报网站的方法
2015/07/10 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python安装pil库方法及代码
2019/06/25 Python
python实现单链表的方法示例
2019/09/03 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Solaris操作系统的线程机制
2012/12/23 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
国旗下的讲话演讲稿
2014/05/08 职场文书
煤矿安全承诺书
2014/05/22 职场文书
企业员工薪酬方案
2014/06/04 职场文书
幼儿老师求职信
2014/06/30 职场文书
观后感的写法
2015/06/19 职场文书
统招统分证明
2015/06/23 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android