P5.js：两张图像的叠加，一张每次刷新，一张不刷新

最新推荐文章于 2024-07-15 18:00:00 发布

写代码的资资

最新推荐文章于 2024-07-15 18:00:00 发布

阅读量856

点赞数 2

分类专栏： Processing 文章标签： JavaScript 图形编程交互式画布动态效果鼠标事件

本文链接：https://blog.csdn.net/weixin_43118073/article/details/108936797

版权

Processing 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

在这里插入图片描述

let x = 200;
let y =200;
let extraCanvas;
function setup()
{
	createCanvas(400,400);
	extraCanvas = createGraphics(400,400);
	extraCanvas.background(255,0,0);
	background(0);
}

function draw()
{

	//iamge(extraCanvas,0,0);
	background(0);
	x += random(-5,5);
	y += random(-5,5);

    let StartX = random(width);
    let StartY = random(height);
    extraCanvas.noStroke();
    extraCanvas.fill(255,255,255,100);
    extraCanvas.ellipse(StartX,StartY,10,10);
  
	if(mouseIsPressed)
	{
		extraCanvas.fill(255,150);
		extraCanvas.noStroke();
		extraCanvas.ellipse(mouseX,mouseY,60,60);
        
	}
	image(extraCanvas,0,0);
	fill(255,200);
	stroke(255);
	rectMode(CENTER);
	rect(x,y,20,20);
}