Html5_convas

var elem = document.getElementById("myConvas");

if (elem && elem.getContext) {

var myContext = elem.getContext("2d");

/*

通過 fillStyle和 strokeStyle 屬性可以輕松的設置矩形的填充和線條。

顏色值使用方法和 CSS 一樣：十六進制數、rgb()、rgba() 和 hsla。

通過 fillRect可以繪制帶填充的矩形。使用 strokeRect 可以繪制只有邊框沒有填充的矩形。

如果想清除部分 canvas 可以使用 clearRect。上述三個方法的參數相同：x, y, width, height。

前兩個參數設定 (x,y) 坐標，后兩個參數設置矩形的高度和寬度。可以使用 lineWidth屬性改變線條粗細

*/

myContext.fillStyle = "#000FFF";

myContext.strokeStyle = "#FF00F0";

/*

通過 canvas 路徑(path)可以繪制任意形狀。可以先繪制輪廓，然后繪制 ? ? ? ? 邊框和填充。

創建自定義形狀很簡單，使用 beginPath()開始繪制，然后使用直線、曲線 ? ? ? ? 和其他圖形繪制你的圖形。

繪制完畢后調用 fill 和 stroke 即可添加填充或者設置邊框。調用 ? ? ? ? ? ? ? ?closePath() 結束自定義圖形繪制

*/

myContext.beginPath();

myContext.moveTo(10,10);

//定義第一條直線的終點坐標，也即為第二條直線的起點坐標

myContext.lineTo(60,90);

myContext.lineTo(10,150);

myContext.lineTo(10,10);

//畫圓

//myContext.arc(90,89,45,50,Math.PI*2,true);

//用fillStyle定義的顏色填充

myContext.fill();

myContext.stroke();

myContext.closePath();

}

總結

以上是生活随笔為你收集整理的html5 直线的两头弯曲,html5教程 （二）（canvas绘制简单的直线）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。