- 相關推薦
html5使用canvas畫三角形
html5如何使用canvas畫三角形,就跟隨百分網小編一起去了解下吧,想了解更多相關信息請持續(xù)關注我們應屆畢業(yè)生考試網!
<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方法使用03-02
HTML5新特性介紹11-17
HTML5字體設置的方法03-29
《流動的畫》說課稿09-05
畫教學設計02-26
PowerPoint使用技巧11-29
使用NPM的技巧11-28