Html5畫布_動力節點Java學院整理

<canvas id=myCanvas width=400 height=200>

默認<canvas>畫佈在頁面上會顯示一塊空白、無邊框的矩形。為了讓其顯示輪廓，通過定義樣式規則給其添加一個虛線邊框：

 canvas { border: 1px dashed black;}

要完成繪圖任務，首先我們要拿到<canvas>對象，接著取得其二維繪圖上下文。

下面樣例演示在頁面加載完畢時獲取繪圖上下文：

 <script> window.onload = function() { var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); //這裡寫繪圖代碼}</script>

（1）下面繪製一條起點是(50,50)，終點是(150,150)的直線線條

context.moveTo(50, 50);context.lineTo(150, 150);context.stroke();

（2）使用lineWidth、strokeStyle屬性分別設置線條的寬度和顏色

//線條寬度context.lineWidth = 10; //線條顏色（支持顏色編碼與rgb()函數）context.strokeStyle = #cd2828;context.strokeStyle = rgb(205,40,40); context.moveTo(50, 50);context.lineTo(150, 150);context.stroke();

（3）使用lineCap屬性設置線條兩端的形狀（線頭類型）：

1. butt：方頭（默認值）
2. round：圓頭
3. square：加長方頭（效果與butt類似，但會在線條的兩頭各增加一半線寬的長度）

 var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d); //線條寬度context.lineWidth = 10;//線條顏色context.strokeStyle = #cd2828; //第一條直線,默認方頭context.moveTo(50, 50);context.lineTo(250, 50);context.stroke(); //第二條直線,使用圓頭context.beginPath();context.moveTo(50, 100); context.lineTo(250, 100);context.lineCap = round;context.stroke(); //第三條直線,使用加長方頭context.beginPath();context.moveTo(50, 150);context.lineTo (250, 150);context.lineCap = square;context.stroke();

上面樣例可以看到每次開始新線段的繪製時，都要調用beginPath()方法。

如果沒有這一步操作，那麼每次調用stroke()都會把畫布上原有的線段再重新繪製一邊。特別像上面的例子，繪製新線段時都要修改上下文屬性，如果不調用beginPath()方法，那麼原有的直線也會使用新的樣式繪製。