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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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读取xml实例代码
2010/01/28 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php制作简单模版引擎
2016/04/07 PHP
php构造函数与析构函数
2016/04/23 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python绘制直线的方法
2018/06/30 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
捐资助学感谢信
2015/01/21 职场文书
感恩教师主题班会
2015/08/12 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server