HTML5边玩边学(1)画布实现方法

一、<canvas>标签 

Html5 引入了一个新的 <canvas> 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现。有了这个标签,浏览器的图形表现力被极大的提升,Flash 和 SilverLight 有没有感到威胁呢? 

新闻链接:Google声称Chrome7浏览器将提速60倍 

<canvas>标签的用法非常简单,如下

  1. <canvas id="tutorial" width="150" height="150" style=""> 
  2. 你的浏览器不支持 Canvas 标签 
  3. </canvas>
复制代码



<canvas>标签和普通的 HTML 标签没有多大的区别,你可以设置它的宽度和高度,可以通过 CSS 设置它的背景色、边框样式等等。 

你可以在 w3cschool 找到关于 <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 对象 ,即渲染上下文对象,你也可以在w3cschool找到关于它的更多内容,都是一些绘图方法。

三、浏览器支持 
除了在那些不支持的浏览器上显示替用内容之外,我们还可以通过脚本的方式来检查浏览器是否支持 canvas ,方法很简单,判断 getContext 函数是否存在即可,代码如下: 

  1. var canvas = document.getElementById(‘tutorial‘); 
  2. if (canvas.getContext){ 
  3. alert("支持 <canvas> 标签"); 
  4. } else { 
  5. alert("不支持 <canvas> 标签"); 
  6. }
复制代码



四、一个小例子 

下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子, 具体的代码将在后续内容中给出 

    1. <canvas style="你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> 
    2. <script type="text/javascript">
    3.         var canvas = document.getElementById(‘move_line‘);
    4.         var ctx=canvas.getContext("2d");
    5.         //上下移动的直线
    6.         var width=400;
    7.         var height=200;
    8.         var y=0
    9.         var dir=1;
    10.         ctx.strokeStyle = "rgb(255,0,0)";
    11.         
    12.         function draw(){
    13.             ctx.clearRect(0,0,width,height)
    14.             ctx.beginPath();
    15.             ctx.moveTo(0,y);
    16.             ctx.lineTo(width-1,y);
    17.             ctx.stroke();
    18.             y=y+dir;
    19.             if((y==0)||(y==(height-1))) dir=dir*(-1);
    20.         }
    21.         
    22.     </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button">

HTML5边玩边学(1)画布实现方法,布布扣,bubuko.com

HTML5边玩边学(1)画布实现方法

上一篇:最牛的打字效果JS插件 typing.js


下一篇:编解码技术学习网站汇总