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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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
Terran剧情介绍
2020/03/14 星际争霸
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
python list转dict示例分享
2014/01/28 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python队列的定义与使用方法示例
2017/06/24 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
表扬稿格式范文
2015/01/16 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
给学校的建议书400字
2015/09/14 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python