今天小编跟大家讲解下有关HTML5边玩边学（1）画布实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5边玩边学（1）画布实现方法 的相关资料，希望小伙伴们看了有所帮助。
一、<canvas>标签 Html5 引入了一个新的 <canvas> 标签 这个标签所代表的区域就好象一块画布 你的所有图形绘制最后都要在这块画布上呈现。有了这个标签 浏览器的图形表现力被极大的提升 Flash 和 SilverLight 有没有感到威胁呢? 新闻链接：Google声称Chrome7浏览器将提速60倍 <canvas>标签的用法非常简单 如下： 复制代码代码如下: <canvas id="tutorial"width="150"height="150"style="background-color:red;"> 你的浏览器不支持 Canvas 标签 </canvas> <canvas>标签和普通的 HTML 标签没有多大的区别 你可以设置它的宽度和高度 可以通过 CSS 设置它的背景色、边框样式等等。 你可以在 这里 找到关于 <canvas> 标签的更多内容。 标签中间的内容是替换内容 如果用户的浏览器不支持 <canvas> 标签 这段内容就会被显示出来；如果用户的浏览器支持 <canvas> 标签 则这段内容将被忽略。 上面的 <canvas> 代码显示效果如下： 你的浏览器不支持 Canvas 标签 如果你用的是IE浏览器 可能只能看到一个提示；如果你用的是谷歌浏览器或者火狐浏览器 你就可以看到一个红色的方块区域。 二、渲染上下文 Rendering Context 其实光有 <canvas> 标签我们并不能作任何事情 玩过 Windows 编程的同学都知道 在 Windows 里面绘图先要得到一个设备上下文 DC ,在 <canvas> 标签上绘图也需要先得到一个渲染上下文 我们的图形并不是直接画到屏幕上的 而是先画到上下文(Context)上 然后再刷新到屏幕上面的。 题外话： 为什么要整出一个“上下文”这么复杂的概念呢 因为有了上下文对象 我们就可以让各种不同的图形设备在我们眼里面看起都是一个样 我们只需要专注于绘图 其他的工作就让操作系统和浏览器去操心吧 说白了就是把各式各样的具体变成统一的抽象 从而减轻我们的负担。 获取上下文非常简单 只需要如下两行代码： var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); 首先获取 canvas 对象 然后调用 canvas 对象的 getContext 方法 这个方法目前只能传入参数 "2d" 不久的将来他可能会支持参数 "3d" 你一定明白那意味着什么 让我们期待吧。 getContext 方法返回一个 CanvasRenderingContext2D 对象 即渲染上下文对象 你可以在 这里 找到关于它的更多内容 都是一些绘图方法。 三、浏览器支持 除了在那些不支持的浏览器上显示替用内容之外 我们还可以通过脚本的方式来检查浏览器是否支持 canvas 方法很简单 判断 getContext 函数是否存在即可 代码如下： 复制代码代码如下: var canvas = document.getElementById('tutorial'); if (canvas.getContext){ alert("支持 <canvas> 标签"); } else { alert("不支持 <canvas> 标签"); } 四、一个小例子 下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子 具体的代码将在后续内容中给出 <canvas style="background-color: black"id="move_line"height="200"width="400">你的浏览器不支持 <canvas>标签 请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 var width=400; var height=200; var y=0 var dir=1; ctx.strokeStyle ="rgb(255,0,0)"; function draw(){ ctx.clearRect(0,0,width,height) ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width-1,y); ctx.stroke(); y=y+dir; if((y==0)||(y==(height-1))) dir=dir*(-1); } </script><p><input onclick="interval=setInterval(draw,10);"value="开始"type="button"> <input onclick="clearInterval(interval);"value="停止"type="button"> 提示：您可以先修改部分代码再运行你的浏览器不支持 <canvas>标签 请使用 Chrome 浏览器 或者 FireFox 浏览器来源：爱蒂网
