优化羊皮纸效果

This commit is contained in:
strawberry 2025-07-12 13:49:22 +08:00
parent 25fee47279
commit 613ff14595

View File

@ -22127,44 +22127,33 @@ let time=0
this.height = 400 this.height = 400
this.pagemax = 1 this.pagemax = 1
this.page = 0 this.page = 0
this.paper = this.paperTexture()
} }
paperTexture() { paperTexture() {
const paperleft = document.createElement('canvas')
paperleft.width = 64
paperleft.height = 64
const paperright = document.createElement('canvas')
paperright.width = 64
paperright.height = 64
const textureCanvas = document.createElement('canvas'); const textureCanvas = document.createElement('canvas');
textureCanvas.width = 64; textureCanvas.width = 325;
textureCanvas.height = 64; textureCanvas.height = 400;
const textureCtx = textureCanvas.getContext('2d'); const textureCtx = textureCanvas.getContext('2d');
// 填充浅色背景 // 填充浅色背景
textureCtx.fillStyle = '#f8f4e8'; textureCtx.fillStyle = '#f8f4e6';
textureCtx.fillRect(0, 0, 64, 64); textureCtx.fillRect(0, 0, 325, 400);
// 添加纸张纹理 // 添加纸张纹理
textureCtx.globalAlpha = 0.03;
for (let i = 0; i < 100; i++) {
const x = Math.random() * 64;
const y = Math.random() * 64;
const radius = Math.random() * 3;
for (let i = 0; i < 1000; i++) {
const x = Math.random() * 325;
const y = Math.random() * 400;
const radius = Math.random() * 2;
const alpha = Math.random() * 0.1
textureCtx.beginPath(); textureCtx.beginPath();
textureCtx.arc(x, y, radius, 0, Math.PI * 2); textureCtx.arc(x, y, radius, 0, Math.PI * 2);
textureCtx.fillStyle = '#000000'; textureCtx.fillStyle = `rgba(100, 80, 60, ${alpha})`;
textureCtx.fill(); textureCtx.fill();
} }
const right = paperright.getContext('2d'),
left = paperleft.getContext('2d') return textureCanvas;
right.translate(64, 0)
right.scale(-1, 1)
right.drawImage(textureCanvas, 0, 0, 64, 64)
left.drawImage(textureCanvas, 0, 0, 64, 64)
return [paperleft, paperright];
} }
background() { background() {
book.style.display = "block" book.style.display = "block"
@ -22198,8 +22187,8 @@ let time=0
ctx.fillStyle = "#e0d6c2" ctx.fillStyle = "#e0d6c2"
ctx.fill() ctx.fill()
core.drawImage(ctx, this.paper[0], 0, 0, this.paper[0].width, this.paper[0].height, dx, 0, this.width, this.height) core.drawImage(ctx, this.paperTexture(), 0, 0, 325, 400, dx, 0, this.width, this.height)
core.drawImage(ctx, this.paper[1], 0, 0, this.paper[1].width, this.paper[1].height, dx + this.width, 0, this.width, this.height) core.drawImage(ctx, this.paperTexture(), 0, 0, 325, 400, dx + this.width, 0, this.width, this.height)
ctx.beginPath() ctx.beginPath()
ctx.moveTo(0, 416) ctx.moveTo(0, 416)