HTML5 canvas 合成與裁切

2021-10-02 10:00:11 字數 616 閱讀 7460

在之前的例子裡面,我們總是將乙個圖形畫在另乙個之上,對於其他更多的情況,僅僅這樣是遠遠不夠的。比如,對合成的圖形來說,繪製順序會有限制。不過,我們可以利用 globalcompositeoperation 屬性來改變這種狀況。此外, clip屬性允許我們隱藏不想看到的部分圖形。

我們不僅可以在已有圖形後面再畫新圖形,還可以用來遮蓋指定區域,清除畫布中的某些部分(清除區域不僅限於矩形,像clearrect()方法做的那樣)以及更多其他操作。

之前的部落格中,介紹了 stroke 和 fill 方法,這裡介紹第三個方法clip

我們將要繪製乙個草原上飄滿蒲公英的畫面

window.onload=draw1;

function

draw1()

}function

drawsnowflake

(ctx,r)

//蒲公英(本來是要畫雪花的,但是太醜了哈哈哈哈,感覺還挺像蒲公英就......)

HTML5 canvas 繪製圓形

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

HTML5 canvas擦除無效

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

HTML5canvas時鐘例項

直接放 不太好,還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...