最近開發的專案中要使用html5繪製各種虛線包括貝塞爾虛線、圓形虛線、各種虛線段，還包括各種形式的背景牆，截圖如下：
這中背景圖有一定的規律，首先應該繪製乙個矩形，填充色為藍色，然後在矩形上面繪製背景牆。
背景牆的繪製步驟如下：
1、繪製橫線
2、繪製豎線
3、進行描邊
上述三個步驟中不叫麻煩的是繪製豎線，但是如果繪製過下圖所示的背景就簡單很多了：
這個就是繪製豎線了，設定好的線寬就能看起來很不錯了。下面給出繪製牆型的原始碼：
/**
* 繪製牆
* @param context
* @param x
* @param y
* @param width
* @param height
* @param color
*/function drawwall(context,x,y,width,height,color)
}//奇數條資料
else
}iseven=!iseven;
}for(var t= 0;t在上面的**中可以很明確的看出繪製步驟。
HTML5繪製顏色漸變
繪製線性漸變要用到 createlineargradient，方法如 createlineargradient xstart,ystart,xend,yend xstart為漸變起始地點的橫座標，ystart為漸變起始地點的縱座標，xend為漸變結束地點的橫座標，yend為漸變起始地點的縱座標。繪製...
HTML5繪製實心的文字
html5繪製實心的文字 1 設計原始碼 2 實現結果 3 原始碼說明 1 建立乙個畫布，設定寬度和高度 2 獲取到元素 var canvas document.getelementbyid canvas 3 建立context物件 var ctx canvas.getcontext 2d 4 設定...
HTML5繪製實心的文字
html5繪製實心的文字 1 設計原始碼 2 實現結果 3 原始碼說明 1 建立乙個畫布，設定寬度和高度 2 獲取到元素 var canvas document.getelementbyid canvas 3 建立context物件 var ctx canvas.getcontext 2d 4 設定...