优化羊皮纸效果
This commit is contained in:
parent
25fee47279
commit
613ff14595
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user