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-radius属性详解
Jul 05 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
如何使用Strace调试工具
2013/06/03 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
django修改models重建数据库的操作
2020/03/31 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
在校生党员自我评价
2013/09/25 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android