Rags to Rings
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background:
url('https://638183.freep.cn/638183/t24/1/rags2rings1.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/t24/1/rags2rings2.jpg') no-repeat center/cover;
background-blend-mode: darken;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover {
background-blend-mode: overlay;
}
#canv {
display: block;
margin: 20px auto;
transform: scale(0.75);
cursor: pointer;
}
</style>
<div id="papa">
<canvas id="canv" width="200" height="200" style=""></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28949242" autoplay loop></audio>
</div>
<script>
(function() {
let rotDeg = 0, prgDeg = 0, raf;
let ctx = canv.getContext('2d');
ctx.lineWidth = 10;
ctx.lineCap = 'round';
let gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, 'red');
gradient.addColorStop(.5, 'orange');
gradient.addColorStop(1, 'green');
let img = new Image();
img.onload = () => mkProg();
img.src = 'https://638183.freep.cn/638183/web/svg/flower_3.svg';
let mkProg = () => {
ctx.clearRect(0, 0, 200, 200);
ctx.clearRect(0, 0, 200, 200);
//底轨圆
ctx.strokeStyle = '#ccc';
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);
ctx.stroke();
//进度圆
ctx.save();
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 90, 0, prgDeg * Math.PI/180);
ctx.stroke();
ctx.restore();
//旋转图片
ctx.save();
ctx.translate(100, 100);
ctx.rotate(rotDeg * Math.PI/180);
ctx.translate(-100, -100);
ctx.drawImage(img, 20, 20, 160, 160);
ctx.restore();
rotDeg = (rotDeg + 1) % 360;
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);
};
aud.onpause = aud.onplaying = () => mkProg();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;
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 {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 0 0 0 calc(50% - 593px);</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 1024px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 640px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">background:</span> </cl-cd>
<cl-cd data-idx="7"> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/rags2rings1.jpg'</span>) no-repeat center/cover,</cl-cd>
<cl-cd data-idx="8"> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/rags2rings2.jpg'</span>) no-repeat center/cover;</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">background-blend-mode:</span> darken;</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">box-shadow:</span> 3px 3px 20px #000;</cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">z-index:</span> 1;</cl-cd>
<cl-cd data-idx="13">}</cl-cd>
<cl-cd data-idx="14">#<span class="tBlue">papa:</span>hover {</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">background-blend-mode:</span> overlay;</cl-cd>
<cl-cd data-idx="16">}</cl-cd>
<cl-cd data-idx="17">#canv {</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">display:</span> block;</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">margin:</span> 20px auto;</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">transform:</span> scale(0.75);</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">cursor:</span> pointer;</cl-cd>
<cl-cd data-idx="22">}</cl-cd>
<cl-cd data-idx="23"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="24"> </cl-cd>
<cl-cd data-idx="25"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="26"> <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span> width=<span class="tMagenta">"200"</span> height=<span class="tMagenta">"200"</span> style=<span class="tMagenta">""</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="27"> <<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>=28949242"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="28"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="29"> </cl-cd>
<cl-cd data-idx="30"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="31">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">let</span> rotDeg = 0, prgDeg = 0, raf;</cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">let</span> ctx = canv.getContext(<span class="tMagenta">'2d'</span>);</cl-cd>
<cl-cd data-idx="34"> ctx.lineWidth = 10;</cl-cd>
<cl-cd data-idx="35"> ctx.lineCap = <span class="tMagenta">'round'</span>;</cl-cd>
<cl-cd data-idx="36"> </cl-cd>
<cl-cd data-idx="37"> <span class="tBlue">let</span> gradient = ctx.createLinearGradient(0, 0, 200, 200);</cl-cd>
<cl-cd data-idx="38"> gradient.addColorStop(0, <span class="tMagenta">'red'</span>);</cl-cd>
<cl-cd data-idx="39"> gradient.addColorStop(.5, <span class="tMagenta">'orange'</span>);</cl-cd>
<cl-cd data-idx="40"> gradient.addColorStop(1, <span class="tMagenta">'green'</span>);</cl-cd>
<cl-cd data-idx="41"> </cl-cd>
<cl-cd data-idx="42"> <span class="tBlue">let</span> img = <span class="tBlue">new</span> Image();</cl-cd>
<cl-cd data-idx="43"> img.onload = () => mkProg();</cl-cd>
<cl-cd data-idx="44"> img.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/svg/flower_3.svg'</span>;</cl-cd>
<cl-cd data-idx="45"> </cl-cd>
<cl-cd data-idx="46"> <span class="tBlue">let</span> mkProg = () => {</cl-cd>
<cl-cd data-idx="47"> ctx.clearRect(0, 0, 200, 200);</cl-cd>
<cl-cd data-idx="48"> ctx.clearRect(0, 0, 200, 200);</cl-cd>
<cl-cd data-idx="49"> <span class="tGreen">//底轨圆</span></cl-cd>
<cl-cd data-idx="50"> ctx.strokeStyle = <span class="tMagenta">'#ccc'</span>;</cl-cd>
<cl-cd data-idx="51"> ctx.beginPath();</cl-cd>
<cl-cd data-idx="52"> ctx.arc(100, 100, 90, 0, 360 * <span class="tRed">Math</span>.PI/180);</cl-cd>
<cl-cd data-idx="53"> ctx.stroke();</cl-cd>
<cl-cd data-idx="54"> <span class="tGreen">//进度圆</span></cl-cd>
<cl-cd data-idx="55"> ctx.save();</cl-cd>
<cl-cd data-idx="56"> ctx.strokeStyle = gradient;</cl-cd>
<cl-cd data-idx="57"> ctx.beginPath();</cl-cd>
<cl-cd data-idx="58"> ctx.arc(100, 100, 90, 0, prgDeg * <span class="tRed">Math</span>.PI/180);</cl-cd>
<cl-cd data-idx="59"> ctx.stroke();</cl-cd>
<cl-cd data-idx="60"> ctx.restore();</cl-cd>
<cl-cd data-idx="61"> <span class="tGreen">//旋转图片</span></cl-cd>
<cl-cd data-idx="62"> ctx.save();</cl-cd>
<cl-cd data-idx="63"> ctx.translate(100, 100);</cl-cd>
<cl-cd data-idx="64"> ctx.rotate(rotDeg * <span class="tRed">Math</span>.PI/180);</cl-cd>
<cl-cd data-idx="65"> ctx.translate(-100, -100);</cl-cd>
<cl-cd data-idx="66"> ctx.drawImage(img, 20, 20, 160, 160);</cl-cd>
<cl-cd data-idx="67"> ctx.restore();</cl-cd>
<cl-cd data-idx="68"> rotDeg = (rotDeg + 1) % 360;</cl-cd>
<cl-cd data-idx="69"> raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);</cl-cd>
<cl-cd data-idx="70"> };</cl-cd>
<cl-cd data-idx="71"> </cl-cd>
<cl-cd data-idx="72"> aud.onpause = aud.onplaying = () => mkProg();</cl-cd>
<cl-cd data-idx="73"> aud.onseeking = () => raf = cancelAnimationFrame(raf);</cl-cd>
<cl-cd data-idx="74"> aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;</cl-cd>
<cl-cd data-idx="75"> </cl-cd>
<cl-cd data-idx="76"> canv.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="77">})();</cl-cd>
<cl-cd data-idx="78"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
这个小播跟教程里的小播又点不同。。
教程里的那个圆里有背景，被图片挖空。。进度圆比底轨宽2
这个除了图形外。圆只显示边缘，。且底轨圆和进度圆宽度相同。 代码实现的两个背景图片融合，跟PS效果一样一样。。好看。。
音乐也独特，十分好听。 南无月 发表于 2024-3-31 18:11
这个小播跟教程里的小播又点不同。。
教程里的那个圆里有背景，被图片挖空。。进度圆比底轨宽2
这个除了 ...
底轨的圆，这里不用 fill，旋转图片也不用 globalCompositeOperation 南无月 发表于 2024-3-31 18:12
代码实现的两个背景图片融合，跟PS效果一样一样。。好看。。
音乐也独特，十分好听。
感谢支持 马黑黑 发表于 2024-3-31 18:13
底轨的圆，这里不用 fill，旋转图片也不用 globalCompositeOperation
原来底轨根本没填充。。
转动的没有用到合成属性{:4_187:}
原来如此，这下算是知道了
马黑黑 发表于 2024-3-31 18:13
感谢支持
支持老师天经地义。。理所当然。。。不用谢谢哈 南无月 发表于 2024-3-31 18:27
支持老师天经地义。。理所当然。。。不用谢谢哈
{:4_205:} 南无月 发表于 2024-3-31 18:26
原来底轨根本没填充。。
转动的没有用到合成属性
原来如此，这下算是知道了
合成，需要两个图层，下图层、上图层。上层图层使用合成滤镜，就能有融合效果。现在，旋转的图片是没有底层图层的，ctx.globalCompositeOperation 就派不上用场 这背景这音乐融合得十分奇妙，画布制作的带进度的播放器实例帖子呢{:4_199:} 前面的画布还能跟着课程一步步看得明白，到了画布合成后，很多已经看得不那么明白了呢{:4_173:} 红影 发表于 2024-3-31 20:15
这背景这音乐融合得十分奇妙，画布制作的带进度的播放器实例帖子呢
是的。不过应关注帖子的主题，这个帖子是有深奥主题的。 红影 发表于 2024-3-31 20:16
前面的画布还能跟着课程一步步看得明白，到了画布合成后，很多已经看得不那么明白了呢
这里，①，底轨圆没有填充，ctx.fill() 去掉了；②，旋转按钮没有使用 globalCompositeOperation，因为它底下没有可融合的图层。
事实上，代码量少了。 鼠标触动的效果还挺不同的呢，从贫困到富有,从压迫到自强,从失败到成功。据说这是一首全球顶级燃曲{:4_204:} 红影 发表于 2024-3-31 20:26
鼠标触动的效果还挺不同的呢，从贫困到富有,从压迫到自强,从失败到成功。据说这是一首全球顶级燃曲{:4_204: ...
很奇特的 马黑黑 发表于 2024-3-31 19:22
老师开心比什么都好 马黑黑 发表于 2024-3-31 19:24
合成，需要两个图层，下图层、上图层。上层图层使用合成滤镜，就能有融合效果。现在，旋转的图片是没有底 ...
好哒，
单层有单层的存在方式。
双层有双层的存在方式。。
{:4_199:} 南无月 发表于 2024-3-31 20:55
老师开心比什么都好
{:4_205:} 南无月 发表于 2024-3-31 20:56
好哒，
单层有单层的存在方式。
双层有双层的存在方式。。
就像，单身也是过，成家也是过一样