美丽的草原我的家
<style>#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 674px; background: lightblue; box-shadow: 2px 4px 8px #333; position: relative; overflow: hidden; z-index: 1; }
#papa > img, #papa > video { display: none; }
#canv { position: absolute; }
#mypic { position: absolute; left: 45%; top: 40px; width: 80px; cursor: pointer; transform: scale(0.8) skew(-10deg); mix-blend-mode: screen; animation: scale 2.5s infinite alternate var(--state); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2050080756" autoplay loop></audio>
<canvas id="canv"></canvas>
<img id="img1" src="https://638183.freep.cn/638183/t24/webp/cyvy.webp" alt = "" />
<img id="img2" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt = "" />
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d21769d3185a.mp4" loop muted></video>
</div>
<script>
(function() {
var isInner = false, deg = 0, raf = null, dx = 0, step = 1, iw;
var w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
var ctx = canv.getContext('2d');
function loadImage(elm, callback) {
if(elm.complete) {
call(elm);
return;
}
elm.onload = function() {
elm.onload = null;
call(elm);
};
};
function call(img) {
iw = img.width;
mState();
};
loadImage(img1);
function render() {
deg = (deg + 1) % 360;
ctx.clearRect(0,0,w,h);
dx = (dx + step) % iw;
ctx.drawImage(img1, dx, 0, w - dx, h, 0, 0, w - dx, h);
ctx.drawImage(img1, w, 0, iw - w, h, w - dx , 0, iw - w, h);
ctx.drawImage(img1, 0, 0, w + dx - iw, h, iw - dx, 0, w + dx - iw, h);
ctx.save();
ctx.translate(w/2, h - 120);
ctx.rotate(deg * Math.PI / 180);
ctx.translate(-w/2, -(h - 120));
ctx.drawImage(img2, w / 2 - 100, h - 220, 200, 200);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.arc(w/2, h - 120, 120, 0, Math.PI * 2);
ctx.clip();
ctx.globalCompositeOperation = 'lighten';
ctx.drawImage(vid, 320, 100, 300, 300, w/2 - 150, h/2 + 50, 300, 300);
ctx.restore();
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};
function mState() {
aud.paused ? vid.pause() :vid.play();
render();
};
aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
canv.onmousemove = (e) => {
isInner = Math.sqrt((e.offsetX - w/2) ** 2 + (e.offsetY - (h - 120)) ** 2) < 100;
canv.style.cursor =isInner ? 'pointer' : 'default';
};
canv.onclick = () => { if(isInner) aud.paused ? aud.play() : aud.pause(); }
})();
</script>
测试，暂不发布源码。感兴趣的朋友可通过查看网页代码获取。敬请理解。 我这台电脑显示正常，循环走动正常，小播转动正常。。音乐播放正常。。
只有视频断续播放。。
不知道等会换台电脑怎么样。{:4_199:} 顺手截了一张图，小播视频和背景都写在画布上{:4_199:}
更加先进的画布啦。。 {:4_170:}只是小播和图片设置代码跟以往不同，需要结合画布熟悉 南无月 发表于 2024-3-28 18:07
我这台电脑显示正常，循环走动正常，小播转动正常。。音乐播放正常。。
只有视频断续播放。。
不知道等会 ...
没有多大的变化，主要是都用画布做出来，图片加了一个检测机制以获取图片的实际宽度（有了宽度和绘制源才能开始运行，尤其对体积较大的图片很麻烦，没缓存完的话是不行的）。另外画布里的旋转图形，不想CSS旋转元素那么简单，需要计算图形中心在画布上的点坐标，移位、旋转再移位会去然后才绘制图形。还有就是划分一个圆形的区域给播放器背景，画源是视频，这个用到画布的clip，电脑上的浏览器没问题，不知道手机的能不能显示视频背景。 美丽开阔的大草原，令人心旷神怡{:4_199:} 黑黑一直在探索新的代码设计呢，很赞{:4_199:} 俺这里都正常了 这个图片可以这么宽的啊 哎呀 黑黑没看见
牧羊姑娘放声唱，愉快的歌声满天涯，，，
是不是猫网络太慢 {:4_189:} 马黑黑 发表于 2024-3-28 18:32
没有多大的变化，主要是都用画布做出来，图片加了一个检测机制以获取图片的实际宽度（有了宽度和绘制源才 ...
function call(img) {
iw = img.width;
mState();
};
这句是自动检测宽度么。。
这样可以不用管实际宽度是多少，直接设自己需要的画布大小就行了。。
画布高度还是要跟图片实际高度一致的吧。。
{:4_174:} 马黑黑 发表于 2024-3-28 18:32
没有多大的变化，主要是都用画布做出来，图片加了一个检测机制以获取图片的实际宽度（有了宽度和绘制源才 ...
这个图片旋转想到指针的转动，每转一次都画一次，好象真的很复杂。。厉害。。
还有视频的处理，居然还要划分专门区域给视频..
感觉这个跟贴的话没那么容易。。{:4_170:} 美丽的大草原太美了。 继续反馈：
论坛和网站这个贴子用电脑手机显示都一切正常。。。
视频流畅，背景动态流畅，小播转动流畅。。。{:4_199:} 南无月 发表于 2024-3-28 21:38
继续反馈：
论坛和网站这个贴子用电脑手机显示都一切正常。。。
视频流畅，背景动态流畅，小播转动流畅。 ...
手机上不敢说百分百，毕竟手机浏览器对w3c标准的遵循能力或态度有关 南无月 发表于 2024-3-28 21:21
这个图片旋转想到指针的转动，每转一次都画一次，好象真的很复杂。。厉害。。
还有视频的处理，居然还要 ...
除非是画一个单一的静态的图形，否则，都是擦了画画了擦，就像上节课和下节课课代表要做的事情一样 南无月 发表于 2024-3-28 21:16
function call(img) {
iw = img.width;
mState();
是的，这个模块固定高度与图片实际高度一样 显示正常，背景开阔美丽，欣赏收藏了！{:4_180:} 亦是金 发表于 2024-3-29 10:21
显示正常，背景开阔美丽，欣赏收藏了！
感谢支持