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实现背景模糊的三种方式
Mar 09 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php编程每天必学之验证码
2016/03/03 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
软件测试常见笔试题
2012/02/04 面试题
设计模式的基本要素是什么
2014/04/21 面试题
中学生的1000字检讨书
2014/10/11 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
文明单位汇报材料
2014/12/24 职场文书
工程部主管岗位职责
2015/02/12 职场文书
焦裕禄观后感
2015/06/03 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers