html5中canvas怎么實(shí)現(xiàn)畫出簡(jiǎn)單的矩形和三角形

小編給大家分享一下html5中canvas怎么實(shí)現(xiàn)畫出簡(jiǎn)單的矩形和三角形，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

有兩種形式，一種是描邊（fill），一種是填充（stroke），具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助 首先在html頁面中放置一個(gè)canvas元素，其中canvas元素應(yīng)該具備三個(gè)屬性ID、width、height。

<canvas id="demo" width="600" height="600"></canvas>

取得canvas對(duì)象并取得上下文var cxt=document.getElementById('demo').getContext("2d");其中參數(shù)2d是確定的。

開始繪制，有兩種形式，一種是描邊（fill），一種是填充（stroke）。

javascript代碼：

<script language="javascript"> 
var cxt=document.getElementById('demo').getContext("2d"); 
cxt.beginPath(); 
cxt.fillStyle="#F00";/*設(shè)置填充顏色*/ 
cxt.fillRect(0,0,200,100);/*繪制一個(gè)矩形，前兩個(gè)參數(shù)決定開始位置，后兩個(gè)分別是矩形的寬和高*/ 
cxt.beginPath(); 
cxt.strokeStyle="#000";/*設(shè)置邊框*/ 
cxt.lineWidth=3;/*邊框的寬度*/ 
cxt.strokeRect(0,120,200,100); 
cxt.beginPath(); 
cxt.moveTo(0,350); 
cxt.lineTo(100,250); 
cxt.lineTo(200,300); 
cxt.closePath();/*可選步驟，關(guān)閉繪制的路徑*/ 
cxt.stroke(); 
</script>

效果圖：

看完了這篇文章，相信你對(duì)html5中canvas怎么實(shí)現(xiàn)畫出簡(jiǎn)單的矩形和三角形有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！