html5 canvas(基本矩形)

2022-05-04 15:45:08 字數 648 閱讀 8904

先從簡單的開始

fillrect(x,y,width,height)

fillrect(0,0,500,500)//在座標0,0處加上乙個寬高500的填充矩形

strokerect(x,y,width,height)
在座標x,y的位置加上乙個寬,高邊框矩形

但是需要使用linewidth,linejoin,strokestyle,miterlimit設定下面會給出矩形函式

clearrect(x,y,width,height)
清除座標x,y的位置寬,高的一塊區域是起完全透明

感覺有點像用ps時候乙個黑色的圖層,拉乙個矩形選框,然後按個delect的感覺一塊透明

然後設定一下填充樣式

context.fillstyle='#000000'    //填充顏色

context.strokestyle='#ff00ff' //邊框顏色

完整**

你的瀏覽器無法使用canvas

結果就是這樣乙個

html5canvas基本功能

var canvas document.getelementbyid canvas var cxt canvas.getcontext 2d 畫線 用線畫三角型 cxt.strokestyle red 線作色 cxt.lineto 59,59 線的起點 cxt.lineto 20,20 cxt.li...

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...

HTML5 canvas擦除無效

部分安卓手機上會出現canvas內圖表重疊,並且清除無效,屬於偶現缺陷,非常難以確定其產生原因,比如下圖這個樣子,第一次繪製的圖形沒有擦除,導致第二次繪製時出現重影 初步考慮為裝置自身問題,引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後,發現在每次擦除 cle...