创建 canvas 地方法很简单.docxVIP

创建 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 中绘制一个矩形 ( HYPERLINK http://www.robodesign.ro/coding/canvas-primerexample-using-canvas.html 点击此处查看效果)： 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()（ 若浏览器支持，如 HYPERLINK /articles/view/presto-2-2-and-opera-10-a-first-look/ Opera 10?和 Firefox 3)。 通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x,?y,?width,?height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。 可以使用?lineWidth?属性改变线条粗细。让我们看看 HYPERLINK http://www.robodesign.ro/coding/canvas-primerexample-rects.html 使用了fillRect,strokeRect clearRect 和其他的例子： 123456789 context.fillStyle???=?#00f;?// bluecontext.strokeStyle?=?#f00;?// redcontext.lineWidth???=?4;?// Draw some rectangles.context.fillRect??(0,???0,?150,?50);context.strokeRect(0,??60,?150,?50);context.clearRect?(30,?25,??90,?60);context.strokeRect(30,?25,??90,?60); 此例子效果图见图1. HYPERLINK http://www