清空canvas畫布內(nèi)容
1、重置寬或高
由于canvas每當(dāng)高度或?qū)挾缺恢卦O(shè)時(shí),畫布內(nèi)容就會(huì)被清空,因此可以用以下方法清空:(此方法僅限需要清除全部?jī)?nèi)容的情況)
var c=document.getElementById("myCanvas"); c.width=c.width;
2、clearRect
1 var c=document.getElementById("myCanvas");2 var ctx=c.getContext("2d");3 ctx.fillStyle="red";4 ctx.fillRect(0,0,300,150);5 ctx.clearRect(20,20,100,50);
3、globalCompositeOperation
引用globalCompositeOperation()函數(shù),這個(gè)函數(shù)是用來(lái)在畫布上組合顏色,我們可以利用這個(gè)原理,疊加(數(shù)學(xué)上的"或"原理)來(lái)制作橡皮。
首先看看 globalCompositeOperation屬性可以設(shè)置的值有哪些,分別是什么效果:
值 | 描述 |
---|---|
source-over | 默認(rèn)。在目標(biāo)圖像上顯示源圖像。 |
source-atop | 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見(jiàn)的。 |
source-in | 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示,目標(biāo)圖像是透明的。 |
source-out | 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分, |