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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 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中看实例学正则表达式
2006/12/25 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php调用shell的方法
2014/11/05 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
家长对老师的评语
2014/04/18 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL