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 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
不要在HTML中滥用div
May 08 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
中国收音机工业发展史
2021/03/02 无线电
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
PHP中cookie知识点学习
2018/05/06 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
年度考核自我评价
2014/01/25 职场文书
经典演讲稿汇总
2014/05/19 职场文书
小学生通知书评语
2014/12/31 职场文书
奖励申请报告范文
2015/05/15 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书