沒有canvas之前，想要在網頁上面繪制線條或圖案，是非常麻煩且不兼容的。在《js畫直線》一文中轉載了網絡上常用的在IE和FF中繪制線條的方法，但如果想要這些方法通用，則是不可能的。但現在有了canvas標簽，一切就變得簡單了。
現在，你只需要在頁面上添加canvas標簽，并通過Javascript調用它的相應方法，就可以輕松的在頁面上繪制線條和圖案。
canvas繪制線條示例
<b>canvas繪制線條示例</b><br/><canvas id="myCanvas" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else { var myContext = myCanvas.getContext("2d"); myContext.moveTo(200, 150); myContext.lineTo(100, 100); myContext.lineTo(200, 50); myContext.strokeStyle = "#FF0000"; myContext.lineWidth = 4; myContext.stroke(); } </script> 說明：
1）顯示在頁面中放置了一個canvas標簽，設定id、width、height等屬性，并為這個標簽設定邊框。
2）在Javascript中檢測瀏覽器是否支持
3）當瀏覽器支持的時候開始調用getContext方法獲得繪圖的上下文（這地方很像vc中的GDI繪圖~~），目前只提供了2D上下文，將來還有可能支持OpenGL ES的3D上下文。
4）moveTo方法是將當前位置移動到指定的坐標
5）lineTo方法是向指定的左邊繪制直線
6）strokeStyle 屬性是指定線條的顏色，在本例子中指定為紅色
7）lineWidth 屬性設置線條的粗細，這里設置為4px
8）stroke方法則是將直線顯示出來。貌似是之前只是規(guī)定了哪里有線條，并沒有顯示，當調用這個方法后，線條才可以顯示。
canvas繪制圖案
<b>canvas繪制圖案</b><BR><canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else { var myContext = myCanvas.getContext("2d"); myContext.fillStyle = "rgb(200,0,0)"; myContext.fillRect(10, 10, 55, 50); myContext.fillStyle = "rgba(0, 0, 200, 0.5)"; myContext.fillRect(30, 30, 55, 50); myContext.fillRect(100, 0, 150, 50); myContext.strokeRect(100, 60, 150, 50); myContext.clearRect(130, 10, 90, 30); } </script> 說明：
１）直接到fillStyle屬性，之前的代碼是相同的，不再贅言。
２）fillStyle屬性設定了填充的顏色、透明度等，如果設置為"rgb(200,0,0)"，則表示一個顏色，不透明；如果設置 為"rgba(0,0,200,0.5)"，則表示顏色為rgb(0,0,200)，透明度為50%，
３）fillRect方法是繪制一個矩形，這個矩形區(qū)域沒有邊框，只有填充色。這個方法有四個參數，前兩個表示左上角的坐標位 置，第三個參數為長度，第四個參數為高度。
４）strokeRect方法繪制一個帶邊框的矩形。該方法的四個參數的解釋同上。
５）clearRect方法是清除一個矩形區(qū)域，被清除的區(qū)域將沒有任何線條。該方法的四個參數的解釋同上。
新聞熱點
疑難解答
