html5使用canvas畫三角形

html5使用canvas畫三角形

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

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

　　代碼如下:

　　var canvas=document.getElementById("canvas");

　　var cxt=canvas.getContext("2d");

　　cxt.beginPath();

　　cxt.moveTo(250,50);

　　cxt.lineTo(200,200);

　　cxt.lineTo(300,300);

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

　　//空心三角形

　　cxt.strokeStyle="red";

　　cxt.stroke();

　　//實心三角形

　　cxt.beginPath();

　　cxt.moveTo(350,50);

　　cxt.lineTo(300,200);

　　cxt.lineTo(400,300);

　　cxt.closePath();

　　cxt.fill();

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

　　代碼如下:

　　var canvas=document.getElementById("canvas");

　　var cxt=canvas.getContext("2d");

　　cxt.font="40px 黑體";

　　//繪制實心字

　　cxt.fillStyle="red";//填充紅色

　　cxt.fillText("hello,思思博士",10,50);

　　//繪制空心字

　　cxt.strokeStyle="red";//紅色邊

　　cxt.strokeText("hello,思思博士",10,100);

【html5使用canvas畫三角形】相關文章：

html5的canvas方法使用09-29

HTML5中Canvas的事件處理介紹06-26

HTML5中canvas標簽實現刮刮卡效果10-15

基于html5 canvas實現漫天飛雪效果的方法09-16

HTML5的Audio標簽使用詳解08-09

php使用html5實現多文件上傳實例09-04

html5中的input新屬性range使用記錄09-13

HTML5中你如何使用CSS建立不可選的文字11-03

24個canvas基礎知識小結09-22