canvas清除畫布方法

首先：定義畫布長寬

 data() {
    return {
      cWidth: 1000,
      cHeight: 600,
    };
  },

1、canvas每當高度或寬度被重設時，畫布內容就會被清空

  cleanCanves() {
       let canvas = document.getElementById("myCanves");
        var ctx = canvas.getContext("2d");
        canvas.height=this.cHeight;
        canvas.width=this.cWidth
}

2. 使用clearRect方法：

function clearCanvas()
{
	
       let canvas = document.getElementById("myCanves");
        var ctx = canvas.getContext("2d");
	ctx .clearRect(0,0,c.width,c.height);

 

3. 類似於方法2，可以用某一特定顏色填充畫布，從而達到清空的目的：

 

function clearCanvas()
{
	let canvas = document.getElementById("myCanves");
    var ctx = canvas.getContext("2d");
	
	ctx .fillStyle="#000000";
	ctx .beginPath();
	ctx .fillRect(0,0,c.width,c.height);
	ctx .closePath();

}