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制作的20种loading动效
Jul 05 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php防攻击代码升级版
2010/12/29 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
Javascript 二维数组
2009/11/26 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
优秀教导主任事迹材料
2014/05/09 职场文书
六年级数学教学反思
2016/02/16 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS