html5使用canvas畫三角形
html5如何使用canvas畫三角形,就跟隨百分網(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();/pic/p>
/pic/p>
cxt.strokeStyle="red";
cxt.stroke();
/pic/p>
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 黑體";
/pic/p>
cxt.fillStyle="red";/pic/p>
cxt.fillText("hello,思思博士",10,50);
/pic/p>
cxt.strokeStyle="red";/pic/p>
cxt.strokeText("hello,思思博士",10,100);
【html5使用canvas畫三角形】相關(guān)文章:
html5的canvas方法使用01-19
HTML5中Canvas的事件處理介紹02-06
HTML5中canvas標(biāo)簽實(shí)現(xiàn)刮刮卡效果10-29
基于html5 canvas實(shí)現(xiàn)漫天飛雪效果的方法01-15