當前位置:才華齋>設計>網頁設計>

html5使用canvas畫三角形

網頁設計 閱讀(3.23W)

html5如何使用canvas畫三角形,就跟隨本站小編一起去了解下吧,想了解更多相關資訊請持續關注我們應屆畢業生考試網!

html5使用canvas畫三角形

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>

程式碼如下:

var canvas=lementById("canvas");

var cxt=ontext("2d");

nPath();

To(250,50);

To(200,200);

To(300,300);

ePath();//填充或閉合 需要先閉合路徑才能畫

//空心三角形

keStyle="red";

ke();

//實心三角形

nPath();

To(350,50);

To(300,200);

To(400,300);

ePath();

();

<canvas id="canvas" width="500" height="400" style="background-color: yellow;"></canvas>

程式碼如下:

var canvas=lementById("canvas");

var cxt=ontext("2d");

="40px 黑體";

//繪製實心字

Style="red";//填充紅色

Text("hello,思思博士",10,50);

//繪製空心字

keStyle="red";//紅色邊

keText("hello,思思博士",10,100);