Question

我写了一段代码，可以在画布元素上随机生成指定数量的不重叠的圆。我希望我的代码拍摄图像并将图像中的颜色映射到画布上的圆圈。为了易于使用，我并排创建了两个画布，每个画布分别为300px x 300px。

var canvas = document.querySelector('canvas');

canvas.width = 300;
canvas.height= 300;

var c = canvas.getContext('2d');


var can=document.getElementById("hide");
can.width = 300;
can.height = 300;
var ctx=can.getContext("2d");
var img=document.getElementById("taco");
ctx.drawImage(img,10,10);

我有一个circle类，它要求所有圆都具有x，y，半径和颜色。

class Circles {
    constructor(x,y,radius){
        this.x =x;
        this.y = y;
        this.radius = radius;
        this.color= color;
    }

    draw() {
        c.beginPath()
        c.arc(this.x,this.y,this.radius,0,Math.PI *2, false);
        c.strokeStyle = 'black';
        c.stroke();
        c.fillStyle =this.color;
        c.fill();
    }
}

最后，我运行一个for循环以生成指定数量的圆，并检查是否有任何重叠的圆。我正在使用getImageData来尝试在其中一个画布上找到图像的像素颜色，并使用该颜色填充另一个画布上的圆圈。

function setup() {
    for(let i=0; i<10;i++){
        let x = Math.random()*300;
        let y = Math.random()*300;
        let pixel= ctx.getImageData(x,y,1,1)
        let data = pixel.data;
        let color = `rgba(${data[0]},${data[1]},${data[2]},${(data[3]/255)})`
        let circle = new Circles(x,y,2,color);

        let overlapping = false
        for(let j=0; j< circleArray.length; j++){
            let other = circleArray[j];
            let d = dist(circle.x,other.x,circle.y,other.y);
            if(d < circle.radius + other.radius){
                overlapping = true;
                break;
            }
        }
        if(overlapping== false){
            circleArray.push(circle);
            //console.log(circleArray);
        }
    }
}

我收到一个在Canvas中似乎很常见的错误：

client.js:49 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

我尝试过此页面上的解决方案，但我使用的图像是下载的png，但这些解决方案似乎都无效。

How to fix getImageData() error The canvas has been tainted by cross-origin data?

HTML Canvas从一张图像获取像素数据以在画布中使用

0 个答案: