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的方法
Aug 29 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 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
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python中随机函数random用法实例
2015/04/30 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
快速了解Python中的装饰器
2018/01/11 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python中itertools的用法详解
2020/02/07 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
超市后勤自我鉴定
2014/01/17 职场文书
迟到早退检讨书
2014/02/10 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
小学师德师风整改措施
2014/10/27 职场文书
史上最牛的辞职信
2015/02/28 职场文书
会计岗位职责范本
2015/04/02 职场文书
督导岗位职责范本
2015/04/10 职场文书
回复函格式及范文
2015/07/14 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Python基础之进程详解
2021/05/21 Python