优化羊皮纸效果
This commit is contained in:
parent
25fee47279
commit
613ff14595
@ -22127,44 +22127,33 @@ let time=0
|
||||
this.height = 400
|
||||
this.pagemax = 1
|
||||
this.page = 0
|
||||
this.paper = this.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');
|
||||
textureCanvas.width = 64;
|
||||
textureCanvas.height = 64;
|
||||
textureCanvas.width = 325;
|
||||
textureCanvas.height = 400;
|
||||
const textureCtx = textureCanvas.getContext('2d');
|
||||
|
||||
// 填充浅色背景
|
||||
textureCtx.fillStyle = '#f8f4e8';
|
||||
textureCtx.fillRect(0, 0, 64, 64);
|
||||
textureCtx.fillStyle = '#f8f4e6';
|
||||
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.arc(x, y, radius, 0, Math.PI * 2);
|
||||
textureCtx.fillStyle = '#000000';
|
||||
textureCtx.fillStyle = `rgba(100, 80, 60, ${alpha})`;
|
||||
textureCtx.fill();
|
||||
}
|
||||
const right = paperright.getContext('2d'),
|
||||
left = paperleft.getContext('2d')
|
||||
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];
|
||||
|
||||
return textureCanvas;
|
||||
}
|
||||
background() {
|
||||
book.style.display = "block"
|
||||
@ -22198,8 +22187,8 @@ let time=0
|
||||
ctx.fillStyle = "#e0d6c2"
|
||||
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.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, 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.moveTo(0, 416)
|
||||
|
Loading…
Reference in New Issue
Block a user