充电
本帖最后由 亚伦影音工作室 于 2025-12-12 22:34 编辑 <br /><br /><style>#bj {position: relative;
width: 1086px;
height:600px;
margin: 10px 0 20px calc(50% - 640px);
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:#800000;
}
#myCanvas{position: absolute;
width: 50%;height: auto; margin: 30px 250px;display:none; }
#gifImage{position: absolute;
width: 50%;height: auto; margin: 30px 250px;}
#btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover; margin: 500px 30px;cursor: pointer;border: none;width:50px;height: 50px;position: absolute;z-index: 20;animation-duration: 0.5s; }
</style>
<div id="bj">
<img id="gifImage" src="https://pic1.imgdb.cn/item/67ce8ab2066befcec6e25baa.gif" >
<canvas id="myCanvas"></canvas>
<div id="btn"></div>
</div>
<script>
let fs= true;
btn.onclick = () => {
if (fs) {
btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
gifImage.style.display = 'none';myCanvas.style.display = 'block';
} else {
btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
gifImage.style.display = 'block';myCanvas.style.display = 'none';
}
fs = !fs;
};
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img= new Image();
img.src = 'https://pic1.imgdb.cn/item/67ce8ab2066befcec6e25baa.gif';
let isPlaying = true;
let currentFrame = 0;
img.onload = () => {
canvas.width =img.width;
canvas.height =img.height;
drawFrame();
};
function drawFrame() {
if (isPlaying) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
currentFrame++;
}
requestAnimationFrame(drawFrame);
}
</script> 动画精彩，谢谢亚伦老师再创新作 这个暂停的时候里面的横条纹就都没有了，感觉应该是停在某处才更合理吧？
页:
[1]