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 选择器 基本选择器介绍
Jan 21 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
基于Html5实现的语音搜索功能
May 13 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
自己做矿石收音机
2021/03/02 无线电
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
python 提取文件的小程序
2009/07/29 Python
Python Requests安装与简单运用
2016/04/07 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python3+Appium安装使用教程
2019/07/05 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
keras导入weights方式
2020/06/12 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
社会发展项目建议书
2014/08/25 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
组织委员竞选稿
2015/11/21 职场文书
利用python做数据拟合详情
2021/11/17 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers