html5的畫布canvas——畫出簡單的矩形、三角形實例代碼
發(fā)布時間：2013-06-09 15:40:43 作者：佚名 
我要評論
我要評論有兩種形式，一種是描邊（fill），一種是填充（stroke），具體的實現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助
首先在html頁面中放置一個canvas元素，其中canvas元素應(yīng)該具備三個屬性ID、width、height。
<canvas id="demo" width="600" height="600"></canvas>
取得canvas對象并取得上下文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);/*繪制一個矩形，前兩個參數(shù)決定開始位置，后兩個分別是矩形的寬和高*/
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>
效果圖：
復制代碼
代碼如下:<canvas id="demo" width="600" height="600"></canvas>
取得canvas對象并取得上下文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);/*繪制一個矩形，前兩個參數(shù)決定開始位置，后兩個分別是矩形的寬和高*/
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>
效果圖：
相關(guān)文章
- 這篇文章主要介紹了HTML5 畫布canvas使用方法，canvas 是一個矩形區(qū)域，可以控制其每一像素，介紹了canvas的多種功能，感興趣的小伙伴們可以參考一下2016-03-18
- 這篇文章主要介紹了使用分層畫布來優(yōu)化HTML5渲染的教程,來自于IBM官方網(wǎng)站開發(fā)者技術(shù)文檔,需要的朋友可以參考下2015-05-08
- 本文介紹了JS和html5實現(xiàn)畫布旋轉(zhuǎn)效果示例，大家參考使用吧2014-01-27
- html5的canvas很強大利用其畫布可輕松繪制貝塞爾曲線，為大家以后使用方便，特于此分享實現(xiàn)代碼，有此需求的朋友可以參考下2013-08-14
html5的畫布canvas——畫出弧線、旋轉(zhuǎn)的圖形實例代碼+效果圖
在做旋轉(zhuǎn)操作之前一定要理解一句話：旋轉(zhuǎn)的是畫布的坐標系而不是圖形本身，首先認識一下畫圓的坐標：中心、起始角、結(jié)束角；接下來的就很簡單了2013-06-09- Html5 引入了一個新的2010-09-21
這篇文章主要介紹了Html5畫布,canvas 元素用于在網(wǎng)頁上繪制圖形。有興趣的小伙伴可以一起來了解一下2017-07-13
