html5使用canvas画三角形

html5使用canvas画三角形

　　html5如何使用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();

　　代码如下:

　　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画三角形】相关文章：