HTML5通过调用canvas对象的getContext()方法来获取绘图环境
发布时间：2014-06-23 15:29:34 作者：佚名 
我要评论
我要评论通过调用canvas对象的getContext()方法来获取绘图环境，其只需要一个参数：绘图环境的类型，下面通过实例为大家详细介绍下
我们用的最基本的绘图环境在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>
获取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>
相关文章
- 本文写一个html5的时钟应用程序试手主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等多的也2012-12-26
- 在html5中我觉得最重要的就是引入了Canvas，使得我们可以在web中绘制各种图形,而Canvas为基于像素的绘图。Canvas是一个相当于画板的html节点，我们必须以js操作绘图2012-12-26
- 这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下2015-05-07
- 这篇文章主要介绍了HTML5 canvas标签实现刮刮卡效果,本文给出了运行效果、HTML代码和JS代码,并给出了完整源码下载,需要的朋友可以参考下2015-04-24
- 这篇文章主要介绍了HTML5 Canvas的事件处理介绍,本文讲解了Canvas的限制、给Canvas元素绑定事件、isPointInPath方法、循环重绘和事件冒泡等内容,需要的朋友可以参考下2015-04-24
- 这篇文章主要介绍了HTML5 Canvas中绘制椭圆的4种方法,本文讲解了参数方程法、均匀压缩法、三次贝塞尔曲线法、光栅法等4种方法,需要的朋友可以参考下2015-04-24
一款基于HTML5+Canvas实现的图片马赛克模糊动画特效源码
经常可以在网上或者电视上看到被马赛克模糊的图片或者视频，今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果2015-02-05
今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像，你可以任意选择一张头像图片，接下来该图片会被打散成许多粒子2015-02-05
今天要分享的一款HTML5 Canvas图表应用提供了折线图和柱形图两种，这款HTML5图表在初始化数据的时候有一种渐现的动画特效，我们可以将这款图表应用在统计页面上2015-01-20- 这篇文章主要介绍了HTML5 Canvas绘制圆点虚线实例,HTML5并未提供画虚线的方法,本文是根据Stack Overflow的方法修改而来,需要的朋友可以参考下2015-01-01
最新评论