`
aerchi
  • 浏览: 419240 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
文章分类
社区版块
存档分类
最新评论

使用 HTML5 canvas 绘制精美的图形

 
阅读更多

新特性帮助您从绘制简单图形到动画

Ken Bluttman, 自由 Web 开发人员, Freelance Consultant

简介:使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。

发布日期:2012 年 2 月 20 日
级别:中级原创语言:英文
访问情况 :3650 次浏览
评论:0(查看|添加评论- 登录)

平均分 5 星 共 12 个评分平均分 (12个评分)
为本文评分

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现,等等。本文主要关注图形方面的增强:canvas。

新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成,但在新兴的支持中,canvas 已经可以在几乎所有现代浏览器上良好运行了,但 Windows® Internet Explorer® 除外。幸运的是,一个解决方案已经出现,将 Internet Explorer 也包含进来。

本质上,canvas 元素是一个白板,直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同,您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画,这不是使用画笔和油彩所能够实现的。

本文探索新的 HTML canvas 元素,从简单地包含一个 canvas 元素到高级 JavaScript 交互(动画的关键)逐步进行演示。学习如何在一个 web 页面上显示 canvas。本文针对 web 设计师和开发人员,尽管 JavaScript 知识不是必须的,但理解该语言的运行方式将有所帮助。但是,HTML 知识是关键所在,尤其是如何创建一个基本 web 页面。

要查看本文展示的示例的实时实例,您需要一个浏览器并能访问 Internet。所有示例都在一个真实网站上提供(参见参考资料)。

浏览器支持

确定哪些浏览器支持 HTML5 和一个移动目标达到什么程度。在本文撰写之时,Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多数新的 HTML5 元素,它们都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5;Internet Explorer 9 处于测试阶段,支持 HTML5,但还有一些问题。

在此期间,有一个针对不支持 HTML5 的 Internet Explorer 版本的补丁可用。这个补丁的前提是创建使用 JavaScript 代码的元素。例如,可以使用代码段document.createElement('canvas')创建一个可识别的 Canvas 标记;但是,这并不意味着有东西经过元素本身 。一个流行的解决方法是包含一个完整的基于 canvas 的 JavaScript 库,这个库由 Google 提供,称为ExplorerCanvas— 或简称excanvas。下载并将其作为一个外部文件引用,如下所示。(参见参考资料中的链接,了解更多excanvas信息。)

<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

通过包含excanvas,您向 Internet Explorer 提供 canvas 及其大多数方法。

创建您的第一个 canvas

由于 canvas 只是一个 HTML 标记,因此它的显示方式只是包含在标记中。第一个示例(如图 1所示)显示一个最简单的 canvas。它之所以可见,是因为它通过style属性获得了一个颜色方案,通过widthheight属性获得了其大小。


图 1. 一个空白 canvas
一个空白 canvas,但由于背景样式而变得可见

这个页面的代码简短明了,如清单 1所示。


清单 1. 包含一个 canvas 的 web 页面的 HTML
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" 
    style="background-color:blue;border: 10px yellow solid"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

这个 canvas 的宽度和高度均为 400 像素,边框为黄色,背景为蓝色。canvas 上没有任何实际绘图;绘图通过属于 canvas 的 JavaScript 方法完成。

canvas 方法

表 1列示了几个附加到 canvas 上下文的方法。


表 1. canvas 方法
方法 用途
getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一(当前)可用的contextID2d
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为x1,y1,结束坐标为x2,y2
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是x1,y1,半径为r1。圆圈的结束坐标为x2,y2,半径为r2
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止(color stop)是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如,fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如,fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于xy,宽度和高度分别为wh的矩形。
strokeRect(x,y,w,h) 绘制一个定位于xy,宽度和高度分别为wh的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标x,y
lineTo(x,y) 从绘图方法结束的最后位置到x,y绘制一条直线。

构建更复杂的 canvas 应用程序

本小节将展示一系列示例,每个示例的功能都比前一个示例略有增加。

更深刻的视觉体验

首先,将一组矩形放置到 canvas 上。记住,矩形是拥有 4 条直边和 4 个直角的图形,正方形是矩形的变体。图 2显示 canvas 上有一系列矩形,每个矩形都比前一个略小。注意,每个矩形的颜色都不同,使其更清晰明确。


图 2. 使用一些矩形填充的 canvas
 canvas 由一些颜色不同的矩形填充

清单 2显示了用于创建图 2 中的 canvas 的代码。每个矩形都由两行代码创建:首先,fillStyle方法使用颜色定义的红、绿、蓝(RGB)格式定义颜色(fillStyle='rgb(255,0,0))。然后,fillRect方法(fillRect(50,50,300,300))定义大小。前两个值设置起始坐标,后两个值设置结束坐标。


清单 2. 使用 JavaScript 代码创建上下文并使用各种方法
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
 window.onload=function() {
   var mycanvas=document.getElementById("myCanvasTag");
   var mycontext=mycanvas.getContext('2d');
   mycontext.fillStyle='rgb(0,0,255)'; 
   mycontext.fillRect(0,0,400,400);   
   mycontext.fillStyle='rgb(255,0,0)';  
   mycontext.fillRect(50,50,300,300);    
   mycontext.fillStyle='rgb(0,255,0)';  
   mycontext.fillRect(100,100,200,200);
   mycontext.fillStyle='rgb(100,100,100)';  
   mycontext.fillRect(125,175,150,25);
 }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

要在 canvas 上绘图,通过将getContext('2d')应用到 canvas 元素访问提供方法的 API。通过这个document.getElementById方法,canvas 元素被设置为一个 JavaScript 变量:

var mycanvas=document.getElementById("myCanvasTag");

然后将getContext应用到 canvas 元素,如下所示。

var mycontext=mycanvas.getContext('2d');

一旦一个变量被设置到上下文,所有方法就可以使用了。

下一个示例展示如何结合两种技术。一种是矩形重叠,方法是使用fillRect参数来定位矩形(见图 3)。


图 3. 向一个 canvas 上的矩形应用透明度
设置 canvas 上的对象的透明度

第二种技术是 RGB 颜色处理的变体,即添加透明度。不使用rgb,而是使用rgbaa表示 alpha 通道,该通道控制透明度。在图 3 中的示例中,第二个矩形的透明度被设置为 50%(或 .5),第三个设置为 25%(或 .25)。清单 3显示了完整的标记。


清单 3. 使用透明度
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    mycontext.fillStyle='rgb(0,0,255)'; 
    mycontext.fillRect(30,30,300,300);           
    mycontext.fillStyle='rgba(0,255,0,0.5)';  
    mycontext.fillRect(60,60,300,300);    
    mycontext.fillStyle='rgba(255,0,0,0.25)';  
    mycontext.fillRect(90,90,300,300); 
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

渐变— 经过协调的颜色混合 — 原生于 canvas ,通过两种方法:createLinearGradientcreateRadialGradient图 4展示了一个线性渐变。addColorStop方法定义一个颜色,以及它在渐变中变为活动状态的位置。由于一个渐变可以拥有多个颜色停止,因此这种定位是主观的。颜色定位值必须介于 0 到 1 之间,但测试变体和颜色停止的数量可以生成不同的结果,即使一个值(比如 .25)保持不变。换句话说,一个颜色停止可以将其位置设定为 .25,但是相关颜色可以从整个渐变路径的四分之一处之后一点开始发生,一直持续到渐变结束,具体情况取决于您设置其他颜色停止的位置。记住,这是一个新的实现,可能还在改进过程中。渐变的一个好处是它们总是引人注目,无论代码和结果是否经过完美的协调。


图 4. 一个线性渐变
一个线性渐变

图 4 中的渐变通过清单 4中的 JavaScript 代码创建。


清单 4. 创建一个线性渐变
				
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createLinearGradient(30,30,300,300);           
    mygradient.addColorStop(0,"#FF0000");
    mygradient.addColorStop(1,"#00FF00");
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,400,400);

注意,清单 4 中的颜色停止被全面实现为从这个方法本身创建的一个实时(on-the-fly)渐变的一个方法。语句mygradient.addColorStop(0,"#FF0000")显示颜色停止拥有两个参数:位置和颜色。

图 5展示了一个放射状渐变。用于创建这个渐变的代码与清单 4 中的代码类似,除了使用createRadialGradient方法替代createLinearGradient方法之外。


图 5. 一个放射状渐变
一个放射状渐变

用于创建图 5 中的放射状渐变的代码如清单 5所示。注意所有 5 个颜色停止。


清单 5. 创建一个放射状渐变
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);           
    mygradient.addColorStop("0","magenta");
    mygradient.addColorStop(".25","blue");
    mygradient.addColorStop(".50","green");
    mygradient.addColorStop(".75","yellow");
    mygradient.addColorStop("1.0","red");                
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,400,400);
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

多个 canvas

一个 web 页面能够包含多个 canvas,每个 canvas 引用它们自己的独特 JavaScript 上下文变量。结果,每个 canvas 都独立于其他 canvas 工作。图 6展示了 4 个 canvas,每个 canvas 上的图像都不同。


图 6. 一个 web 页面上的多个 canvas
多个 canvas

清单 6显示了用于创建图 6 中的页面的代码。注意,每个 canvas 都有一个惟一 ID 且每个上下文都是惟一的。


清单 6. 一个 web 页面上的多个 canvas
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycontext1=document.getElementById("myCanvasTag1").getContext('2d');
    var mycontext2=document.getElementById("myCanvasTag2").getContext('2d');
    var mycontext3=document.getElementById("myCanvasTag3").getContext('2d');
    var mycontext4=document.getElementById("myCanvasTag4").getContext('2d');         
    // gradient 1
    var mygradient1=mycontext1.createLinearGradient(30,30,90,90);           
    mygradient1.addColorStop(0,"#FF0000");
    mygradient1.addColorStop(1,"#00FF00");
    mycontext1.fillStyle=mygradient1;
    mycontext1.fillRect(0,0,100,100);
    // gradient 2   
    var mygradient2=mycontext2.createLinearGradient(30,30,90,90);           
    mygradient2.addColorStop(1,"#FF0000");
    mygradient2.addColorStop(0,"#00FF00");
    mycontext2.fillStyle=mygradient2;
    mycontext2.fillRect(0,0,100,100);

    var mygradient3=mycontext3.createLinearGradient(30,30,90,90);           
    mygradient3.addColorStop(0,"#0000FF");
    mygradient3.addColorStop(.5,"#00FFDD");
    mycontext3.fillStyle=mygradient3;
    mycontext3.fillRect(0,0,100,100);

    var mygradient4=mycontext1.createLinearGradient(30,30,90,90);           
    mygradient4.addColorStop(0,"#DD33CC");
    mygradient4.addColorStop(1,"#EEEEEE");
    mycontext4.fillStyle=mygradient4;
    mycontext4.fillRect(0,0,100,100);
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid">
</canvas>
<canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid">
</canvas>
<br />
<canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid">
</canvas>
<canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

JavaScript 事件和动画

本文已经展示了可用于 canvas 的各种方法,每种方法都创建了一个可视结果。现在我们提高一个等级,看看 canvas 如何实现事件和动画。JavaScript 能够识别许多事件,包括在一个特定 web 页面元素上方移动或悬停鼠标。JavaScript 语言能够识别更多事件,下面的示例将使用其中几个。

整合事件

图 7中的示例是使用前面清单中的方法创建的。现在我们添加几个新技术。面部的鼻子、眼睛和圆形项目以及外部边界都使用arc方法创建。眼睫毛被绘制为线条,嘴被创建为一条贝赛尔曲线。图 7 还在 canvas 底部显示了一些文本,这是使用fillText方法创建的。


图 7. 使用 JavaScript 事件绘制一张正在眨眼的脸
一张正在眨眼的脸

清单 7显示图 7 使用的代码。


清单 7. 使用事件创建一个眨眼
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');

  //draw face
  mycontext.beginPath();
  mycontext.arc(300, 250, 200, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.stroke();

  //draw left eye
  mycontext.beginPath();
  mycontext.arc(220, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(100,100,225)';
  mycontext.fill();

  //draw left iris
  mycontext.beginPath();
  mycontext.arc(220, 150, 10, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(0,0,0)';
  mycontext.fill();

  //draw left eyelid
  mycontext.beginPath();
  mycontext.arc(220, 150, 30, 0, Math.PI, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();

  //draw left eyelashes
  mycontext.strokeStyle='rgb(0,0,0)';
  lashes(mycontext,198, 170, 193, 185);
  lashes(mycontext,208, 177, 204, 193);
  lashes(mycontext,220, 180, 220, 195);
  lashes(mycontext,232, 177, 236, 193);
  lashes(mycontext,242, 170, 247, 185);
  mycontext.stroke();

  openeye();

  //draw right eyelashes
  mycontext.strokeStyle='rgb(0,0,0)';
  lashes(mycontext, 358, 170, 353, 185);
  lashes(mycontext, 368, 177, 364, 193);
  lashes(mycontext, 380, 180, 380, 195);
  lashes(mycontext, 392, 177, 396, 193);
  lashes(mycontext, 402, 170, 407, 185);
  mycontext.stroke();

  //draw nose
  mycontext.beginPath();
  mycontext.arc(300, 250, 20, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.stroke();

  // draw smile
  mycontext.beginPath();
  mycontext.lineWidth = 10;
  mycontext.moveTo(180, 320);
  mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360);
  mycontext.closePath();
  mycontext.stroke();

  //draw message at bottom
  mycontext.font="1em sans-serif";
  mycontext.fillStyle="rgb(0,0,0)";
  mycontext.fillText("Move the mouse over and off the canvas - the face winks!", 10, 480);
}

function lashes(cntx,x1,y1,x2,y2) {
  cntx.moveTo(x1,y1);
  cntx.lineTo(x2,y2);
}

function closeeye() {
  //close right eye
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();
}

function openeye() {
  //open right eye
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(100,100,225)';
  mycontext.fill();
  //draw right iris
  mycontext.beginPath();
  mycontext.arc(380, 150, 10, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(0,0,0)';
  mycontext.fill();
  //draw right eyelid
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="600" height="500" style="border: 5px blue solid"
   onmouseover="closeeye()" onmouseout="openeye()"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

图 7中的脸通过一些 JavaScript 事件而改变。特别是,onmouseoveronmouseout事件分别用于调用closeeye()openeye()函数。这些函数不是 canvas 的方法,但是标准 JavaScript 函数。事件和函数之间的连接在 canvas 元素本身中进行。在清单 7中,页面的主体区域接近代码的底部,那是 canvas 所在的位置。canvas 标记内是:

onmouseover="closeeye()" onmouseout="openeye()"

清单 7中出现了一个新的构造 —beginPath()endPath()的使用,它们用于明确区分独立的复杂绘图动作。封装在其中的代码绘制一个特殊的图像,以分隔其他绘图动作。

关于清单 7中的代码的几个值得注意的地方列示如下:

  • 当页面打开时,通过调用openeye()函数来绘制右眼。
  • 使用fillText方法将文本写到 canvas 上。
  • arc方法中,MATH.PI * 2创建了一个完整的圆圈,而MATH.PI将只创建一个半圆(例如,眼皮)。

动画

JavaScript 打包了一个强大的编程利器。这种语言能够执行很多操控,如清单 8所示。这个代码重复运行,在 canvas 上绘制一些线条。线条颜色随机设置。


清单 8. 使用 JavaScript 创建动画
				
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
<script>
  var mycanvas  = document.getElementById("myCanvasTag")
  var mycontext = mycanvas.getContext('2d');
  var x;
  var y;
  var x2;
  var y2;
  var r;
  var g;
  var b;
 function line() {
   x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   r=Math.floor(Math.random()*255);
   g=Math.floor(Math.random()*255);
   b=Math.floor(Math.random()*255);
   mycontext.moveTo(x, y);
   mycontext.lineTo(x2, y2);
   mycontext.strokeStyle='rgb(' + r + ',' + g +  ',' + b + ')';  
   mycontext.lineWidth=Math.floor(Math.random()*6);      
   mycontext.stroke();
   mycontext.restore();
 }
 setInterval(line, 100);

</script>
</body>
</html>

图 8显示了这个动画的一张快照。清单 8中的代码与本文其他所有代码示例都不同,因为 JavaScript 块被放置到页面底部,canvas 元素下方。这确保 canvas 在代码运行之前就已经被呈现了。


图 8. JavaScript 用于绘制无穷无尽的随机线条
一个 canvas 上的动画

结束语

HTML5 被定位于用于改变 web 开发的面貌。新的元素使得页面布局更简单,支持通过浏览器存储本地数据,拥有 canvas 之类的音频、视频和图形平台。随着浏览器升级以支持更多新功能,web 的性质和用户体验将变得妙趣横生。web 开发前景一片光明!


参考资料

学习

获得产品和技术

讨论

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics