html5_canvas_基础..docVIP

Html5 Canvas 基础 HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。 大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas ： 下载支持 3D canvas, HTML video 和 File I/O 的 Opera 关于 Opera 3D canvas 上下文的文章 关于 Firefox 3D canvas上下文的文章 本文介绍 2D canvas基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。 可以点击此处批量下载本文实例代码 简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 创建 canvas 的方法很简单，只需要在 HTML 页面中添加 canvas 元素：123 canvas id=myCanvas width=300 height=150Fallback content, in case the browser does not support Canvas./canvas 为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。 创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果)： 12345678910111213141516 // Get a reference to the element.var elem = document.getElementById(myCanvas);?// Always check for properties 和 methods, to make sure your code doesnt break // in other browsers.if (elem amp;amp; elem.getContext) {? // Get the 2d context.? // Remember: you can only initialize one context per element.? var context = elem.getContext(2d);? if (context) {? ? // You are done! Now you can draw your first rectangle.? ? // You only need to provide the (x,y) coordinates, followed by the width and ? ? // height dimensions.? ? context.fillRect(0, 0, 150, 100);? }} 可以把上面代码放置在文档 head 部分中，或者放在外部文件中。 2D context API 介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。基本线条 上面的例子中展示了绘制矩形是多么简单。 通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla()（ 若浏览器支持，如 Opera 10 和 Firefox 3)。 通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。 可以使用 lineWidth 属性改变线条