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实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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 tp5中使用原生sql查询代码实例
2020/10/28 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
写给小白看的JavaScript异步
2017/11/29 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python实现高斯函数的三维显示方法
2018/12/29 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python实现udp传输图片功能
2020/03/20 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
销售行政专员职责
2014/01/03 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
群众路线党课主持词
2014/04/01 职场文书
自主招生推荐信范文
2014/05/10 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
公司经营目标责任书
2015/01/29 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
焦点访谈观后感
2015/06/11 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
我的收音机情缘
2022/04/05 无线电
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python