html5使用canvas畫(huà)三角形

　　html5如何使用canvas畫(huà)三角形，就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

　　<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();//填充或閉合 需要先閉合路徑才能畫(huà)

　　//空心三角形

　　cxt.strokeStyle="red";

　　cxt.stroke();

　　//實(shí)心三角形

　　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 黑體";

　　//繪制實(shí)心字

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

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

　　//繪制空心字

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

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

【html5使用canvas畫(huà)三角形】相關(guān)文章：

html5的canvas方法使用03-02

HTML5新特性介紹11-17

用canvas就可以實(shí)現(xiàn)圖片的濾鏡轉(zhuǎn)化代碼實(shí)現(xiàn)03-24

HTML5字體設(shè)置的方法03-29

《流動(dòng)的畫(huà)》說(shuō)課稿09-05

畫(huà)教學(xué)設(shè)計(jì)02-26

Dreamweaver的使用優(yōu)點(diǎn)05-16

PowerPoint使用技巧11-29

使用NPM的技巧11-28