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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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/03 咖啡文化
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
python交互式图形编程实例(三)
2017/11/17 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
python如何更新包
2020/06/11 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
高中体育教学反思
2014/01/29 职场文书
《母鸡》教学反思
2014/02/25 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年化验员工作总结
2014/11/18 职场文书
给领导的感谢信范文
2015/01/23 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书