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实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
深入了解php4(2)--重访过去
2006/10/09 PHP
php 远程关机操作的代码
2008/12/05 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
浅析Python 序列化与反序列化
2020/08/05 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
体育教师自荐信范文
2013/12/16 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
代理协议书范本
2014/04/22 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
求职信怎么写
2014/05/23 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书