叶水相逢
本帖最后由 马黑黑 于 2024-3-22 19:49 编辑 <br /><br /><style>#papa { margin: -60px 0 0 calc(50% - 593px); width: 1024px; height: 600px; box-shadow: 3px 3px 6px #333; z-index: 1; position: relative; }
#canv { display: block; cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214981" autoplay loop></audio>
<canvas id="canv" title="播放/暂停"></canvas>
</div>
<script>
(function () {
let ctx = canv.getContext("2d");
let img = new Image();
img.src = "https://638183.freep.cn/638183/t24/1/u9.jpg";
let CanvasXSize = canv.width = papa.offsetWidth,
CanvasYSize = canv.height = papa.offsetHeight,
speed = 30,
scale = 1.05,
x = 0,
y = -4.5,
dx = 0.75;
let imgW, imgH, clearX, clearY, mTimer;
let draw = () => {
ctx.clearRect(0, 0, clearX, clearY);
if(imgW <= CanvasXSize) {
if(x > CanvasXSize) x = -imgW + x;
if(x > 0) ctx.drawImage(img, -imgW + x, y, imgW, imgH);
if(x - imgW > 0) ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
}else{
if(x > CanvasXSize) x = CanvasXSize - imgW;
if(x > CanvasXSize - imgW) ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
}
ctx.drawImage(img, x, y, imgW, imgH);
x += dx;
};
let mState = () => mTimer = aud.paused ? clearInterval(mTimer) : setInterval(draw, speed);
img.onload = () => {
imgW = img.width * scale;
imgH = img.height * scale;
if(imgW > CanvasXSize) x = CanvasXSize - imgW;
clearX = imgW > CanvasXSize ? imgW : CanvasXSize;
clearY = imgH > CanvasYSize ? imgH : CanvasYSize;
draw();
};
aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => mTimer = clearInterval(mTimer);
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span>0 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 600px; <span class="tBlue">box-shadow:</span> 3px 3px 6px #333; <span class="tBlue">z-index:</span> 1; }</cl-cd>
<cl-cd data-idx="3"> #canv { <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="4"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="5"> </cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="7"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=501214981"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="8"> <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span> width=<span class="tMagenta">"1024"</span> height=<span class="tMagenta">"600"</span> style=<span class="tMagenta">"<span class="tBlue">border:</span> 1px solid gray"</span> title=<span class="tMagenta">"播放/暂停"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="12"><span class="tGreen">/* 画面移动代码改自Firefox工程师的示例 */</span></cl-cd>
<cl-cd data-idx="13">(<span class="tBlue">function</span> () {</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">let</span> ctx = canv.getContext(<span class="tMagenta">"2d"</span>);</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">let</span> img = <span class="tBlue">new</span> Image();</cl-cd>
<cl-cd data-idx="16"> img.src = <span class="tMagenta">"https://638183.freep.cn/638183/t24/1/u9.jpg"</span>;</cl-cd>
<cl-cd data-idx="17"> </cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">let</span> CanvasXSize = papa.offsetWidth,</cl-cd>
<cl-cd data-idx="19"> CanvasYSize = papa.offsetHeight,</cl-cd>
<cl-cd data-idx="20"> speed = 30,</cl-cd>
<cl-cd data-idx="21"> scale = 1.05,</cl-cd>
<cl-cd data-idx="22"> x = 0,</cl-cd>
<cl-cd data-idx="23"> y = -4.5,</cl-cd>
<cl-cd data-idx="24"> dx = 0.75;</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">let</span> imgW, imgH, clearX, clearY, mTimer;</cl-cd>
<cl-cd data-idx="26"> </cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">let</span> draw = () => {</cl-cd>
<cl-cd data-idx="28"> ctx.clearRect(0, 0, clearX, clearY);</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">if</span>(imgW <= CanvasXSize) {</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">if</span>(x > CanvasXSize) x = -imgW + x;</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">if</span>(x > 0) ctx.drawImage(img, -imgW + x, y, imgW, imgH);</cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">if</span>(x - imgW > 0) ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);</cl-cd>
<cl-cd data-idx="33"> }<span class="tBlue">else</span>{</cl-cd>
<cl-cd data-idx="34"> <span class="tBlue">if</span>(x > CanvasXSize) x = CanvasXSize - imgW;</cl-cd>
<cl-cd data-idx="35"> <span class="tBlue">if</span>(x > CanvasXSize - imgW) ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);</cl-cd>
<cl-cd data-idx="36"> }</cl-cd>
<cl-cd data-idx="37"> ctx.drawImage(img, x, y, imgW, imgH);</cl-cd>
<cl-cd data-idx="38"> x += dx;</cl-cd>
<cl-cd data-idx="39"> };</cl-cd>
<cl-cd data-idx="40"> </cl-cd>
<cl-cd data-idx="41"> <span class="tBlue">let</span> mState = () => mTimer = aud.paused ? clearInterval(mTimer) : setInterval(draw, speed);</cl-cd>
<cl-cd data-idx="42"> </cl-cd>
<cl-cd data-idx="43"> img.onload = () => {</cl-cd>
<cl-cd data-idx="44"> imgW = img.width * scale;</cl-cd>
<cl-cd data-idx="45"> imgH = img.height * scale;</cl-cd>
<cl-cd data-idx="46"> <span class="tBlue">if</span>(imgW > CanvasXSize) x = CanvasXSize - imgW;</cl-cd>
<cl-cd data-idx="47"> clearX = imgW > CanvasXSize ? imgW : CanvasXSize;</cl-cd>
<cl-cd data-idx="48"> clearY = imgH > CanvasYSize ? imgH : CanvasYSize;</cl-cd>
<cl-cd data-idx="49"> draw();</cl-cd>
<cl-cd data-idx="50"> };</cl-cd>
<cl-cd data-idx="51"> </cl-cd>
<cl-cd data-idx="52"> aud.onpause = aud.onplaying = () => mState();</cl-cd>
<cl-cd data-idx="53"> canv.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="54">})();</cl-cd>
<cl-cd data-idx="55"><<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="56"> </cl-cd>
</div>
对图片的要求：
① 最理想的图片尺寸是，高度和 #papa 一样，宽度大于 #papa 的宽度；
② 图片最好是全景2d图片，纯正的2d全景图可以确保头尾衔接无缝。 流动的山水与空灵的琴声，让人放松。 在画布上的移动的画。。。
无缝衔接，无限循环。。。
好看。。 南无月 发表于 2024-3-22 13:04
在画布上的移动的画。。。
无缝衔接，无限循环。。。
好看。。
要的是这个效果 樵歌 发表于 2024-3-22 12:50
流动的山水与空灵的琴声，让人放松。
忘记吃瓜皮了都 为了用canvas ? 美不胜收的好贴，极喜欢！{:4_191:}问好并赞许先生！ 马黑黑 发表于 2024-3-22 13:21
要的是这个效果
效果极佳 ，音乐极美 。。一流好贴。{:4_170:} 南无月 发表于 2024-3-22 17:44
效果极佳 ，音乐极美 。。一流好贴。
不是三流了么 小文 发表于 2024-3-22 16:52
美不胜收的好贴，极喜欢！问好并赞许先生！
晚上好{:4_191:} 马黑黑 发表于 2024-3-22 19:00
晚上好
晚安！ 人在画中游 美不胜收！ 这地方好熟悉阿黑黑{:5_117:} 赞！
{:4_204:}{:4_178:}{:4_199:} 大猫咪 发表于 2024-3-22 19:24
人在画中游 美不胜收！ 这地方好熟悉阿黑黑 赞！
香格里拉往南那么一点点，俺以前经常在那里下河捞虾捉五色鱼儿 小文 发表于 2024-3-22 19:02
晚安！
这么早休息？ 马黑黑 发表于 2024-3-22 19:49
香格里拉往南那么一点点，俺以前经常在那里下河捞虾捉五色鱼儿
普达措 – 你翩翩而来，我翘首以待{:5_117:} 大猫咪 发表于 2024-3-22 19:54
普达措 – 你翩翩而来，我翘首以待
欧？那你得有极大的耐心，俺这人都不太留恋曾经呆过的地方 马黑黑 发表于 2024-3-22 20:22
欧？那你得有极大的耐心，俺这人都不太留恋曾经呆过的地方
真黑{:4_397:}{:5_117:} 马黑黑 发表于 2024-3-22 19:50
这么早休息？
回先生，没有。是想跟先生道个晚安，别太累了！保重身体！{:4_191:}