堆棧內存溢出
  簡體   English   中英

我可以為按鈕后面的畫布設置動畫並繪制像素嗎？

[英]Can I animate a canvas behind a button and draw pixels?

 原文  2019-12-22 20:43:43  8   2    javascript/ html

問題描述

我想創建一個 HTML 按鈕，它將為一些 1 到 2 個像素的方塊設置動畫。 我在 Ruby (Ruby2D) 中做了類似的事情：

Ruby2D 示例

[源代碼]

由於我對HTML缺乏了解，我只創建了按鈕： 

 <!Doctype HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Button Particles</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body style="background-color: #000"> <a><img src="https://raw.githubusercontent.com/Souravgoswami/HTMLProjects/master/Project%206%20-%20Our%20Lovely%20Course%20%5BHTML%2C%20CSS%2C%20JQuery%2C%20Bootstrap%5D/assets/img/down-arrow.svg?sanitize=true" class="centre-img" width="100px" height="100px"></a> <script> // Position elements of class centre-img to centre of the screen var centreElements = document.getElementsByClassName('centre-img') for (let i = 0 ; i < centreElements.length ; ++i) { var el = centreElements[i].style el.position = 'absolute' el.left = '50%' el.top = '50%' el.margin = `-${centreElements[i].width / 2}px 0px 0px -${centreElements[i].offsetHeight / 2}px` } </script> </body> </html>

如何創建畫布來為按鈕下的粒子設置動畫？

2 個解決方案

解決方案1
 0  2019-12-22 20:43:43

要為粒子設置動畫，您首先需要創建一個畫布。 對您的代碼進行了大量修改。 為了創建相同的效果，這里是我編寫的示例代碼。

代碼

 // Position elements of class centre-img to centre of the screen var centreElements = document.getElementsByClassName('centre-img') for (let i = 0 ; i < centreElements.length ; ++i) { var el = centreElements[i].style el.position = 'absolute' el.left = '50%' el.top = '50%' el.margin = `-${centreElements[i].width / 2}px 0px 0px -${centreElements[i].offsetHeight / 2}px` } // Set the FPS (FPS), number of stars (N), and the fading of the particles (fading) var FPS = 60, N = 1500, fading = 0.025 // Star Class class Star { constructor(x, y, size, opacity) { this.x = x this.y = y this.size = size var a = Math.random() * 2 + 0.5, b = Math.random() * 2 + 0.5 this.xspeed = Math.random() < 0.5 ? a * -1 : a this.yspeed = Math.random() < 0.5 ? b * -1 : b this.r = Math.floor(Math.random() * 256) this.g = Math.floor(Math.random() * 256) this.b = Math.floor(Math.random() * 256) this.opacity = opacity } } // Draw Background Stars in a Separate Canvas for Simplicity var stars = [], fPS = 1000 / FPS var canvasBG = document.getElementById('background') var interval = null function drawBG() { if(interval) clearInterval(interval) var ctxBG = canvasBG.getContext('2d') var bgStars = [] canvasBG.width = window.innerWidth canvasBG.height = window.innerHeight for(let i = 0 ; i < 250 ; ++i) bgStars[i] = new Star(Math.random() * canvasBG.width, Math.random() * canvasBG.height, Math.random() *2 + 1, 1) interval = setInterval(() => { ctxBG.clearRect(0, 0, canvasBG.width, canvasBG.width) for(let i = 0 ; i < 250 ; ++i) { var bS = bgStars[i] ctxBG.fillStyle = `rgba(${bS.r},${bS.g},${bS.b},${Math.random() > 0.05 ? 1 : 0})` ctxBG.fillRect(bS.x, bS.y, bS.size, bS.size) } }, fPS * 20) } // Draw Particles on Button var canvas = document.getElementById('starfield') canvas.width = window.innerWidth canvas.height = window.innerHeight var btn = document.getElementById('btn') var btnRect = btn.getBoundingClientRect(), btnTouched = false btn.onmouseover = () => { btnTouched = true } btn.onmouseout = () => { btnTouched = false } function appendStars() { for (let i = 0 ; i < N ; ++i) stars[i] = new Star(Math.random() * canvas.width,Math.random() * canvas.height,Math.random() * 2, 0) } drawBG() appendStars() window.onresize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight btnRect = document.getElementById('btn').getBoundingClientRect() drawBG() appendStars() } setInterval(() => { var ctx = canvas.getContext( '2d' ) ctx.clearRect( 0, 0, canvas.width, canvas.height ) for (let i = 0 ; i < N ; ++i) { var star = stars[i] star.x += Math.sin(i) + star.xspeed star.y += Math.cos(i) + star.yspeed if (star.x < btnRect.x || star.x > btnRect.right || star.y < btnRect.y || star.y > btnRect.bottom) star.opacity -= fading if (star.x > canvas.width || star.x < -star.size || star.y > canvas.height || star.y < -star.size) { var randSize = Math.random() * 2 + 1 stars[i] = new Star( btnRect.x + btnRect.width / 2 - randSize / 2, btnRect.y + btnRect.height / 2- randSize / 2, randSize, btnTouched ? 1 : 0 ) } ctx.fillStyle = `rgba(${star.r}, ${star.g}, ${star.b}, ${star.opacity})` ctx.fillRect(star.x, star.y, star.size, star.size ) } }, fPS)
 <!Doctype HTML> <html> <head> <meta charset="utf-8"> <title>Button Particles</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body style="background-color: #000"> <canvas id="starfield" style="position: fixed"></canvas> <canvas id="background" style="position: fixed"></canvas> <a><img src="https://raw.githubusercontent.com/Souravgoswami/HTMLProjects/master/Project%206%20-%20Our%20Lovely%20Course%20%5BHTML%2C%20CSS%2C%20JQuery%2C%20Bootstrap%5D/assets/img/down-arrow.svg?sanitize=true" id="btn" class="centre-img" width="100px" height="100px"></a> </body> </html>

現在這應該非常有效，因為我們正在創建一個由數千個 Star 類實例組成的數組。 正如你所看到的 Star 類的實例是非常輕量級的。 創建數組后，我們在畫布上繪制時循環遍歷項目。

代碼也可以在這里找到。

測試瀏覽器

上面的代碼已經過測試

  1. Mozilla 火狐 72.0b5。
  2. Chromium 79.0.3945.88 Arch Linux
  3. 獵鷹 3.1.0

解決方案2
 0  2021-06-24 03:46:56

我知道這不完全是你要找的，但它是一個簡單的按鈕動畫，我從我看到的一堆廣告中重新創建：（抱歉代碼凌亂）

<!DOCTYPE html>
<html lang="en">
<head>
            <title>Animated Button (simple)</title>
            <style>
                            button {
                            background-color: lime;
                            color: white;
                            border: none;
                            border-radius: 8px;
                            padding: 10px 14px;
                            font-size: 12px;
                            }
            </style>
</head>
<body>

</body>
<script>
btn = document.createElement("button"); //create a button
document.body.appendChild(btn); //display button
btn.setAttribute("onclick","alert('Clicked')") //alert onclick
go(); //run go
function go() { //defines go
setTimeout(function() {
btn.innerHTML = "C";
setTimeout(function() {
btn.innerHTML = "Cl";
setTimeout(function() {
btn.innerHTML = "Cli";
setTimeout(function() {
btn.innerHTML = "Clic";
setTimeout(function() {
btn.innerHTML = "Click";
setTimeout(function() {
btn.innerHTML = "Click M";
setTimeout(function() {
btn.innerHTML = "Click Me";
setTimeout(function() {
btn.innerHTML = "Click Me!";
setTimeout(function() {
btn.innerHTML = "Click Me";
setTimeout(function() {
btn.innerHTML = "Click M";
setTimeout(function() {
btn.innerHTML = "Click";
setTimeout(function() {
btn.innerHTML = "Clic";
setTimeout(function() {
btn.innerHTML = "Cli";
setTimeout(function() {
btn.innerHTML = "Cl";
setTimeout(function() {
btn.innerHTML = "C";
setTimeout(function() {
btn.innerHTML = "";
go(); //run go again
}, 300);
}, 300)
}, 300)
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}, 300);
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用大像素設置漸變動畫？ 如何操作畫布中的像素？ 畫布吸引了div問題 如何在 canvas 中繪制圖像？ 如何在畫布上實時繪制帶有像素的線條 在 canvas 上繪制 2 個像素，縮放為 20 個像素，沒有模糊或紋理溢出 我如何在移動設備上繪制 canvas？ 為什么canvas畫不出來？ 使用按鈕在畫布上繪制 如何在畫布上畫圓圈？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM