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实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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个人网站架设连环讲(二)
2006/10/09 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python中django学习心得
2017/12/06 Python
python中int与str互转方法
2018/07/02 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python WSGI的深入理解
2018/08/01 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
公司股东合作协议书
2014/09/14 职场文书
2014年药店工作总结
2014/11/20 职场文书
语文教师求职信范文
2015/03/20 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js