Html5_convas

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

if (elem && elem.getContext) {

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

/*

通過(guò) fillStyle和 strokeStyle 屬性可以輕松的設(shè)置矩形的填充和線條。

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

通過(guò) fillRect可以繪制帶填充的矩形。使用 strokeRect 可以繪制只有邊框沒(méi)有填充的矩形。

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

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

*/

myContext.fillStyle = "#000FFF";

myContext.strokeStyle = "#FF00F0";

/*

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

創(chuàng)建自定義形狀很簡(jiǎn)單，使用 beginPath()開(kāi)始繪制，然后使用直線、曲線 ? ? ? ? 和其他圖形繪制你的圖形。

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

*/

myContext.beginPath();

myContext.moveTo(10,10);

//定義第一條直線的終點(diǎn)坐標(biāo)，也即為第二條直線的起點(diǎn)坐標(biāo)

myContext.lineTo(60,90);

myContext.lineTo(10,150);

myContext.lineTo(10,10);

//畫(huà)圓

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

//用fillStyle定義的顏色填充

myContext.fill();

myContext.stroke();

myContext.closePath();

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。