無法清除HTML / JavaScript畫布

Question

這是我的JavaScript代碼：

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;


 particle = [];
 particleCount = 0,
gravity = 0.3,
colors = [
  '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
  '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
  '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
  '#FF5722', '#795548'
];


function drawparticles(){
        for( var i = 0; i < 250; i++){


particle.push({
    x : width/2,
    y : height/2,
    boxW : randomRange(5,15),
    boxH : randomRange(5,15),
    size : randomRange(2,6),

    spikeran:randomRange(3,5),

    velX :randomRange(-8,8),
    velY :randomRange(-50,-10),

    angle :convertToRadians(randomRange(0,360)),
    color:colors[Math.floor(Math.random() * colors.length)],
    anglespin:randomRange(-0.2,0.2),

    draw : function(){


        context.save();
            context.translate(this.x,this.y);
            context.rotate(this.angle);
        context.fillStyle=this.color;
        context.beginPath();
        // drawStar(0, 0, 5, this.boxW, this.boxH);
    context.fillRect(this.boxW/2*-1,this.boxH/2*-1,this.boxW,this.boxH);
        context.fill();
                context.closePath();
        context.restore();
        this.angle += this.anglespin;
        this.velY*= 0.999;
        this.velY += 0.3;

        this.x += this.velX;
        this.y += this.velY;
            if(this.y < 0){
        this.velY *= -0.2;
            this.velX *= 0.9;
        };
        if(this.y > height){
        this.anglespin = 0;
        this.y = height;
        this.velY *= -0.2;
            this.velX *= 0.9;
        };
            if(this.x > width ||this.x< 0){

        this.velX *= -0.5;
        };



    },




    });


   }


}



function drawScreen(){

for( var i = 0; i < particle.length; i++){
    particle[i].draw();

}


}



function update(){

    var fps = 120;

    context.clearRect(0,0,width,height);
    drawScreen();

    setTimeout(function() {
        requestAnimationFrame(update);
    }, 1000 / fps);
}

update();

 function clearparticles(content){
    content.clearRect(0, 0, canvas.width, canvas.height);
 }

 function randomRange(min, max){
    return min + Math.random() * (max - min );
 }

 function randomInt(min, max){
    return Math.floor(min + Math.random()* (max - min + 1));
 }

function convertToRadians(degree) {
    return degree*(Math.PI/180);
 }

函數clearparticles是我嘗試清除畫布上的html / javascript粒子的地方。 但是，這似乎根本不起作用。 看來我收到以下錯誤： 無法讀取未定義的屬性'clearRect'

我想不出什么辦法使它起作用。 我究竟做錯了什么？

編輯：這是HTML代碼（測試代碼）：

<style>
    html, body  {
        padding:0;
        margin:0;
          width: 100%;
          height: 100%;
          cursor: default;   text-align: center;

          font-family: 'PT Sans', sans-serif;
    }

    canvas  {
                        pointer-events:none;
                position: absolute;
                left:0;
                top:0;
                z-index:0;
                border:0px solid #000;
    }
</style>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

   </head>
     <body>
        <canvas id="canvas"></canvas>
         <script language="javascript" type="text/javascript" src="confetti2.js"></script>
     <button onclick="drawparticles()">Spawn</button>
      <button onclick="clearparticles()">Clear</button>

  </body>

    </html>

Answer 1

您的HTML代碼包含

 <button onclick="clearparticles()">Clear</button>

當您單擊該按鈕時，它將調用方法clearparticles() 。 但這並不存在。 它找不到該功能。 你擁有的是

function clearparticles(content){
    content.clearRect(0, 0, canvas.width, canvas.height);
}

該函數需要一個參數，但是您不提供onclick事件中的任何數據。 您可以通過刪除“ content”參數來解決它。 要清除矩形，只需調用圖形上下文的clearRect(...)函數（更多信息： MDN - CanvasRenderingContext2D ）

由於您已經有一個上下文作為全局變量，

context = canvas.getContext("2d");

您只需使用下一個即可解決您的問題

function clearparticles(){
    context.clearRect(0, 0, canvas.width, canvas.height);
}

或者，您當然可以在onclick屬性中提供一個參數。 但這不是一個干凈的解決方案。

無法清除HTML / JavaScript畫布

問題描述

1 個解決方案

解決方案1
1 已采納 2015-11-17 23:59:43

無法清除HTML / JavaScript畫布

問題描述

1 個解決方案

解決方案1 1 已采納 2015-11-17 23:59:43

解決方案1
1 已采納 2015-11-17 23:59:43