<canvas id="canvas" width="800" height="800"></canvas> <hr> <div style="text-align: center"> <video id="girl" controls src="../img/girl.mp4"></video> <button id="start_end">▶</button> </div> <script> let canvas = document.getElementById("canvas") canvas.style.border = "1px solid red" var ctx = canvas.getContext("2d"); let x = canvas.width, y = canvas.height let gl = document.getElementById("girl"); gl.style.height = "400px" var btn = document.getElementById("start_end"); let status=0; btn.addEventListener("click", function () { if( gl.paused){ gl.play() btn.innerText= '||' btn.style.fontWeight='800' render() }else{ gl.pause() btn.innerText='▶' console.log("关闭:",status) cancelAnimationFrame(status) } }) gl.onended=function (){ //console.log("播放完了") btn.innerText='▶' cancelAnimationFrame(status) } render() function render(){ // var img_y = /\d+/.exec(gl.style.height||100); var img_y = gl.clientHeight var img_x = gl.clientWidth // console.log(img_x,img_y) ctx.drawImage(gl,0,0,img_x*y/img_y,y) status = requestAnimationFrame(render) console.log("status:",status) } </script>
时间: 2024-02-14 20:21:33 浏览: 34
这段代码实现了一个 Canvas 动画,使用 HTML5 的 `<video>` 元素作为动画的源。在每一帧动画中,获取 `<video>` 元素的当前图像并绘制到 Canvas 上,从而实现视频动画的效果。同时,添加了一个按钮,可以控制视频的播放和暂停,以及动画的开始和结束。在暂停或播放结束时,使用 `cancelAnimationFrame` 函数停止动画的渲染。
相关问题
html { overflow: hidden; touch-action: none; content-zooming: none; } body { position: absolute; margin: 0 padding: 0 background: #111; width: 100%; height: 100%; } #canvas { width: 100%; height: 100%; background: #fff; position: absolute; } #text { position: absolute; left: 0; bottom: 10px; width: 100%; pointer-events: none; } #text div { position:absolute; color: #888; left:0 width:100% text-align:center; top:-32px; font-family: 'Poiret One', cursive; font-size:32px; }帮我定位错误
您提供的代码有两处缺少分号:
1. `margin: 0 padding: 0` 应该改为 `margin: 0; padding: 0;`
2. `left:0 width:100% text-align:center;` 应该改为 `left:0; width:100%; text-align:center;`
修改后的代码如下:
```css
html {
overflow: hidden;
touch-action: none;
content-zooming: none;
}
body {
position: absolute;
margin: 0;
padding: 0;
background: #111;
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
background: #fff;
position: absolute;
}
#text {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
pointer-events: none;
}
#text div {
position:absolute;
color: #888;
left:0;
width:100%;
text-align:center;
top:-32px;
font-family: 'Poiret One', cursive;
font-size:32px;
}
```
写一个炫酷的登录框架,青春校园运动风格,且要符合vite框架 在<script steup> 有动态粒子效果
以下是一个基于Vite框架的青春校园运动风格登录框架,带有动态粒子效果。你可以复制以下代码到你的项目中进行使用。
```html
<template>
<div class="login-container">
<div class="particles-container">
<canvas ref="canvas"></canvas>
</div>
<div class="form-container">
<form class="login-form">
<h2 class="form-title">Welcome Back!</h2>
<div class="form-input-container">
<input type="text" placeholder="Username" v-model="username" />
<input type="password" placeholder="Password" v-model="password" />
</div>
<button type="submit" class="form-button" @click.prevent="login()">Login</button>
</form>
</div>
</div>
</template>
<script setup>
import Particles from 'particlesjs'
const particles = new Particles('canvas', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5']
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000'
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'repulse'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
})
let username = ''
let password = ''
function login() {
// Add your login logic here
}
</script>
<style>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e8e8e8;
}
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.form-container {
background-color: #ffffff;
padding: 32px;
border-radius: 4px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
}
.form-title {
text-align: center;
margin-bottom: 16px;
color: #444444;
}
.form-input-container {
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
input[type='text'],
input[type='password'] {
margin-bottom: 8px;
background-color: #f5f5f5;
border: none;
padding: 12px;
border-radius: 4px;
font-size: 16px;
color: #444444;
}
.form-button {
background-color: #4caf50;
border: none;
color: #ffffff;
padding: 12px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.form-button:hover {
background-color: #388e3c;
}
@media (max-width: 768px) {
.form-container {
width: 100%;
max-width: 400px;
}
}
</style>
```
在以上代码中,我们使用了 `particles.js` 库来实现动态粒子效果,使用了 `canvas` 元素来渲染粒子。同时,我们使用了 Vite 框架的 `<script setup>` 语法来定义组件的逻辑部分,包括登录表单的数据和登录逻辑。在样式部分,我们使用了常见的样式技巧来实现青春校园运动风格,比如圆角边框、阴影效果等。
你可以根据自己的需求和喜好来调整样式和粒子效果的参数,打造出符合自己品牌特色的登录框架。