回答
使用globalAlpha。您還必須使用fillRect進行繪製。 clearRect只是擦除像素。它不能部分擦除,所以你必須使用fillRect或其他繪圖基元。
ctx.globalAlpha = 0.2;
ctx.fillRect(50,50,75,50);
ctx.globalAlpha = 1.0;
ClearRect刪除什麼在那裏,留下空白。最好的方法是使用rgba fillStyle值,因爲它只會使矩形(或您繪製的任何其他形狀)透明。該代碼將是:
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(25,72,32,32);
我更喜歡這個選擇的答案,因爲它在使用後並不影響所有繪圖。 –
您可以保存和恢復上下文,以便通過使用環繞其他上下文更改的'ctx.save()'和'ctx.restore()'來全局性地生效。 –
我比較喜歡這個,因爲它更具體一些:討論填充的透明度(我想'清理'一個矩形),而不是任何操作的透明度。這兩種解決方案需要4行(因爲ctx.save()和ctx.restore()保留上下文)。無論如何,這兩種解決方案對我都有好處。 – ddcovery
- 1. HTML5 canvas:圍繞文本繪製矩形?
- 2. 點繪製矩形
- 3. Android - 繪製矩形
- 4. VB.net繪製矩形形式
- 5. 繪製矩形,然後繪製縮小矩形在先前的矩形內
- 6. glRotate更改座標,以便矩形繪製旋轉的平面
- 7. 安卓繪製矩形
- 8. 繪製一個矩形
- 9. ontouch在android繪製矩形
- 10. 在MKMapView中繪製矩形
- 11. 如何繪製矩形?
- 12. 在iOS中繪製矩形
- 13. 用XNA繪製矩形
- 14. 循環繪製矩形
- 15. 繪製矩形圖像 - LibGdx
- 16. 繪製矩形上Mapbox GL
- 17. 用按鈕繪製矩形
- 18. 繪製多面矩形
- 19. 在opengl繪製矩形android
- 20. 在JPanel上繪製矩形
- 21. 問題在繪製矩形
- 22. 繪製可逆矩形
- 23. 在.NET中繪製矩形
- 24. 用JMonkey繪製矩形
- 25. 繪製矩形空未滿
- 26. Java ME繪製矩形
- 27. 在Java中繪製矩形
- 28. 繪製矩形在Java中
- 29. Android畫布繪製矩形
- 30. 如何繪製矩形?
這使得整個畫布透明(在Chrome ATLEAST) –
布賴恩,它不清除整個畫布,只有你給它的大小和位置。這就是這4個數字;前兩個是畫布上的X座標,然後是Y座標,然後是要清除矩形的X和Y的大小。 (請記住,Y值反而會隨着它們下降而在畫布中變大) –
請注意,您需要在這兩行後面調用'ctx.globalAlpha = 1;'以防止進一步繪製調用(甚至以前不管你信不信)也不會部分透明。 –