javascript - 查看整个 Canvas 是否被涂成一种颜色的方法。 JavaScript + 处理.js

Question

我仍然是 javascript 的初学者，我正在制作一个游戏，将整个屏幕染成白色，同时画笔变得越来越小，直到完全消失。

我想知道，是否有一种简单的方法可以确定整个 Canvas 是否已绘制，以便我可以放置获胜屏幕？我正在使用processing.js 库，这是我的代码(如果有任何用处):

background(255,0,0);
           var eight = 100;
           var draw = function(){
               strokeWeight(eight);
               point(mouseX,mouseY);
               eight -= 0.2;
               if(eight<0){
                   noStroke();
               }

Answer 1

这是一种确定用户是否已将每个像素变白的适度有效的方法

1. 创建一个数组，其中每个 Canvas 像素都由一个数组元素表示。

   var pixels=new Array(canvas.width*canvas.height);
   

2. 最初用全零填充数组。

3. 创建一个变量来保存迄今为止变白的唯一像素数。

   var whited=0;
   

4. 当用户经过某个像素时，查看该像素是否已经变白。如果还没有被白化，则将其数组值更改为 1 并增加白化变量。

   var n = mouseY * canvas.width + mouseX
   
   if(pixels[n]=0){
       pixels[n]=1;
       whited++;
   }
   

5. 如果 whited 的值等于 Canvas 上的像素数，则您获胜。

   if(whited==pixels.length){
       alert('You have won!');
   }
   

一个想法:您可以考虑制作一个网格，而不是让用户找到每个(微小的)丢失的像素，这样用户就可以更轻松地找到 1 个(较大的)丢失的网格单元，而不是在白色的海洋中找到一个丢失的像素。