900字范文 > 代码版刘畊宏本草纲目健身操【内附源码/demo】

代码版刘畊宏本草纲目健身操【内附源码/demo】

时间：2022-04-16 06:35:25

前言

一天增长一千万粉丝，刘畊宏创造了全平台涨粉新纪录。

全网这么多刘畊宏女孩，程序猿版刘畊宏男孩申请出战！

一、话不多说，先上demo

代码版-刘畊宏本草纲目毽子操

二、html+css+javascript代码版刘畊宏本草纲目毽子操

刘畊宏男孩，程序员申请出战！

本前端程序猿使用了html+css+javascript，实现了刘畊宏全部视频代码版。

二、源码

点击个人主页下载源码。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>健身操</title></head><body><div id="app"><input type="file" id="button" /><div class="text-box"></div><canvas id="canvas" style="display: none"></canvas><video controls autoplay muted class="video-box"></video></div><script>const fontList = '!@9865432baco71'const unit = 256 / fontList.lengthwindow.onload = function () {const {videoBox, textBox, fileBtn } = useGetNode()const context = canvas.getContext('2d')canvas.width = 480canvas.height = 480fileBtn.onchange = getFilevideoBox.oncanplay = function () {window.interval = setInterval(() => {draw(context, videoBox, textBox)}, 10)}}const useGetNode = () => {return {videoBox: document.querySelector('.video-box'),textBox: document.querySelector('.text-box'),canvas: document.querySelector('#canvas'),fileBtn: document.querySelector('#button')}}function getGray(r, g, b) {return 0.299 * r + 0.578 * g + 0.114 * b}function toText(gray) {return fontList[parseInt(gray / unit)]}const getFile = () => {const {videoBox, fileBtn } = useGetNode()if (!fileBtn) returnlet file = fileBtn.files[0]let src = URL.createObjectURL(file)clearInterval(window.interval)window.interval = nullvideoBox.src = src}const draw = (context, video, target) => {if (!video || !target || !context) returnlet {videoWidth, videoHeight } = videowhile (videoWidth > 480 || videoHeight > 480) {videoWidth /= 1.2videoHeight /= 1.2}video.height = videoHeightvideo.width = videoWidthcontext.drawImage(video, 0, 0, videoWidth, videoHeight)let ImageData = context.getImageData(0, 0, videoWidth, videoHeight)console.log(ImageData, 'ImageData')let [imgDataArr, imgDataWidth, imgDataHeight] = [ImageData.data,ImageData.width,ImageData.height]let html = ''for (let h = 0; h < imgDataHeight; h += 3) {let p = '<p>'for (let w = 0; w < imgDataWidth; w += 3) {let index = (w + imgDataWidth * h) * 4let r = imgDataArr[index]let g = imgDataArr[index + 2]let b = imgDataArr[index + 3]let gray = getGray(r, g, b)p += toText(gray)}p += '</p>'html += p}target.innerHTML = html}</script></body><style>* {margin: 0;padding: 0;}body {font-size: 8px;margin: 10px;/* font-family: Menlo; */font-family: 'Courier New';font-family: monospace;color: rgba(45, 45, 75, 0.96);}p {height: 5px;-webkit-transform-origin-x: 0;}span {width: 5px;}.video-box {visibility: hidden;position: absolute;bottom: 0;}</style></html>