标签：
现在，让我们来看看如何在HTML页面中声明一个Canvas元素。
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;"> 你的浏览器不支持HTML5 Canvas！</canvas> |
上面的代码声明了一个Canvas元素，它的宽度为500，高度为150，并且设置了1个像素的灰色描边。
<canvas>中的文字会被忽略。如果浏览器不支持HTML5 Canvas元素，这些文字会被作为提示文字显示出来。<canvas>元素放置在页面中任何想要显示它的地方，例如放置在一个<div>中。要想在HTML5 canvas中绘制各种图形，需要使用javascript。下面是绘制的步骤：
下面是一个简单的例子，它遵从了上面的4个步骤来在canvas中绘制一个矩形。
<script> // 1. 等待页面DOM元素加载完毕。 window.onload = function() { drawExamples(); } function drawExamples(){ // 2. 获取canvas元素的引用。 var canvas = document.getElementById("ex1"); // 3. 从canvas元素中获取一个2D上下文（context）。 var context = canvas.getContext("2d"); // 4. 从2D上下文中使用绘制函数绘制图形。 context.fillStyle = "#ff0000"; context.fillRect(10,10, 100,100); }</script> |
在上面的代码中，首先在window对象中添加了一个事件监听。这个事件监听函数在页面页面加载完成之后被执行。这个函数会调用一个已经定义好的函数drawExamples()。
接着，drawExamples()函数通过document.getElementById()方法获取canvaas元素的引用。然后，通过在canvas引用上执行getContext("2d")方法获取一个2D上下文。
标签：
原文地址：http://www.cnblogs.com/new-dream-new-hope/p/5763279.html
