一. canvas簡介

??canvas是html5新增的元素，主要用于圖形的繪制。canvas本身沒有繪圖能力，一切都是通過javascript來完成的。

二. canvas使用

在html中添加canvas元素，定義canvas元素的高寬

在javascript代碼中獲取canvas元素對象

var canvas = document.getelementbyid("canv");

調用該對象的getcontext(“2d”)方法獲取上下文

var context = canvas.getcontext("2d");

使用上下文對象在canvas上繪制圖形。繪制圖形的方法在下一部分介紹

三. 繪制圖形的方法

繪制直線

context.moveto(x, y); // 定義直線的起點

context.lineto(x, y); // 定義直線的終點

context.stroke(); // 繪制直線

繪制扇形(圓也可以認為是扇形)

context.arc(originx, originy, r, startrad, stoprad); // 定義扇形(包括圓心坐標，半徑以及開始繪制和結束繪制的弧度)

context.stroke(); // 繪制扇形

繪制矩形

context.fillrect(x, y, width, height); // 繪制矩形,(x,y)表示矩形左上角頂點的坐標

繪制文本

context.filltext(text, x, y); // 繪制文本,(x, y)表示文本左下角的坐標

繪制圖像

var img = document.getelementbyid("testimage"); // 獲取圖像元素對象

context.drawimage(img, x, y); // 繪制圖像，(x, y)表示圖像左上角坐標

四. 上下文對象的屬性

fillstyle

?用來定義繪制樣式。可以在繪制直線，扇形，矩形和文本時使用。取值可以時顏色，漸變或圖案，默認是顏色#000000。

context.fillstyle = "red"; // 設置繪制樣式為紅色

context.fillrect(x, y, width, height); // 此時矩形是紅色的

??? fillstyle的取值可以是漸變。創建漸變的代碼如下：

var grd = context.createlineargradient(x, y, x1, y1); // 創建線性漸變

grd.addcolorstop(0, "red"); // 設置漸變起始顏色為紅色

grd.addcolorstop(0, "blue"); // 設置漸變結束顏色為藍色

var grd = context.createradialgradient(x, y, r, x1, y1, r1); // 創建徑向漸變

grd.addcolorstop(0, "red"); // 設置漸變起始顏色為紅色

grd.addcolorstop(0, "blue"); // 設置漸變結束顏色為藍色

font

? 用來定義繪制文本時的使用字體。

context.font = "幼圓"; // 使用幼圓字體

context.filltext(text, x, y); // 使用幼圓字體繪制文本