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教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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 Class 文章
2007/04/04 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP静态文件生成类实例
2014/11/29 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python简单操作excle的方法
2018/09/12 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python如何设置静态变量
2020/09/07 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
总经理任命书
2014/03/29 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
大学生村官个人总结
2015/02/15 职场文书
新生儿未入户证明
2015/06/23 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang