如何使用 css 或 ZDE9B9ED78D7E2E1DCEEFFEE780E2F91Z 移動 canvas 的 position？

Question

這是我在這里的第一個問題。 我對 html、css 和 javascript 相當陌生。

我想要實現的類似於我創建的這個模型：我的網站模型

我嘗試用 javascript 代碼替換左側的矩形以達到類似的效果。 javascript 代碼取自此代碼筆：

https://codepen.io/vaaghu/pen/abmYGYz

我已經將 canvas 稍微向右推了一點，但是如果我擴展 canvas 的寬度和高度，canvas 確實會擴展，但圓形動畫不會。 如何擴展此 animation？

 var canvas = document.querySelector("canvas") canvas.width = 800; canvas.height = 1600; var c = canvas.getContext("2d"); var mouse = {x:innerWidth/2,y:innerHeight/2} window.addEventListener("mousemove",(event)=>{ mouse.x = event.x; mouse.y = event.y; }) window.addEventListener("resize",()=>{ canvas.width = window.innerWidth; canvas.height = window.innerHeight; int(); }) function Circle(x, y,dx,dy,radius,color) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.color = color var maxRadius = 30; this.draw = function() { c.beginPath(); c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false); c.fillStyle = color c.fill(); } this.update = function(){ if(this.x+this.radius > innerWidth || this.x-this.radius < 0) { this.dx = -this.dx; } if(this.y+this.radius > innerHeight || this.y -this.radius < 0 ) { this.dy = -this.dy; } if( mouse.x - this.x > -50 && mouse.x - this.x < 50 && mouse.y - this.y >-50 && mouse.y - this.y < 50) { if (this.radius < maxRadius) { this.radius += 1 } } else { if (this.radius > radius) { this.radius -= 1 } } this.x += this.dx; this.y += this.dy; this.draw(); } } var colorArray = ["#F5871A","#81968F","#DFAA2F","#D76034","#F5411D"]; var circleArray = [] function int() { circleArray = [] for (let i = 0; i < 700; i++) { var x = Math.random() * window.innerWidth; var y = Math.random() * (window.innerHeight ); var radius = Math.random() * 5 + 2; var dx = Math.random() - 0.5; var dy = Math.random() - 0.5; var color = colorArray[Math.floor(Math.random()*4)] circleArray.push(new Circle(x,y,dx,dy,radius,color)) } } int() function animate() { requestAnimationFrame(animate); c.clearRect(0,0,innerWidth,innerHeight) for (let i = 0; i < circleArray.length; i++) { circleArray[i].update() } } animate();

 .mediaViewInfo { --web-view-name: Homepage; --web-view-id: Homepage; --web-scale-on-resize: true; --web-show-navigation-controls: true; --web-enable-deep-linking: true; --web-page-font: arial, Manrope; }:root { --web-view-ids: Homepage; } * { margin: 0; padding: 0; box-sizing: border-box; border: none; } #Homepage { position: absolute; width: 100%; height:450%; font-family: arial, Manrope; background-color: rgba(255,255,255,1); overflow: hidden; --web-view-name: Homepage; --web-view-id: Homepage; --web-scale-on-resize: true; --web-show-navigation-controls: true; --web-enable-deep-linking: true; --web-page-font: arial; } canvas { background: #FFFF05; background-image: linear-gradient(to bottom, #81968F99, #FFE636CC, #FF000066); margin: 50% 0% 0% 8%; padding: 0vh 0vh 0vh 0vh; z-index:-1; width:auto; } #Wave_Vid { position: absolute; left: -19px; top: -1920px; width: 100vh; height: 100vh; overflow: hidden; }.Wave_container { overflow: visible; } #MIDDLEcontainer { position:absolute; top: 24%; left:59%; } #MIDDLE { overflow: visible; } #Good_ideas_can_take_time { line-height: 0.8; width: 100%; text-align: left; padding-right: 10%; font-family: Manrope, arial; font-style: normal; font-weight: bold; font-size: 15vh; color: rgba(129,150,143,1); margin-bottom: 30px; } #And_execution_takes_even_more { width: 100%; line-height: 1em; text-align: left; padding-right: 30vh; font-family: Manrope, arial; font-style: normal; font-weight: normal; font-size: 5vh; color: rgba(129,150,143,1); margin-bottom: 20px; } #Line_ { fill: transparent; stroke: rgba(129,150,143,1); stroke-width: 4px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; }.Line_ { width: 509px; height: 10px; transform: matrix(1,0,0,1,0,0); margin-bottom: 40px; } #Midcontainer { position:absolute; } #Mid { float:bottom; position:absolute; }.MySkills { position: relative; overflow:visible; height: 1em; text-align: left; font-family: Manrope, arial; font-style: normal; font-weight: lighter; font-size: 12vh; color: rgba(129,150,143,1); letter-spacing: -0.85px; }

 <,DOCTYPE html> <html> <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>wbdg portfolio</title> <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="../faux styles.css"/> </head> <body> <div> <canvas></canvas> <script id="jssomething" type="text/javascript" src="../faux scripts:js"></script> <script src="https.//kit.fontawesome.com/4f3ce16e3e.js" crossorigin="anonymous"></script> <div id="MIDDLEcontainer"> <div id="MIDDLE"> <div id="Good_ideas_can_take_time"> <p>Good ideas can take time.</p> </div> <div id="And_execution_takes_even_more"> <span>And execution takes even more.</span> </div> <svg class="Line_" viewBox="0 0 674 4"> <path id="Line_" d="M 0 0 L 674 0"> </path> </svg> <div id="Midcontainer"> <div id="Mid"> <div class="MySkills"> Photos </div> <div class="MySkills"> Illustrations </div> <div class="MySkills"> Videos </div> <div class="MySkills"> Animations </div> <div class="MySkills"> Branding </div> </div> </div> </div> </div> </div> </body> </html>

Answer 1

如果我理解正確，請在int() function 中更改這些行：

  var x = Math.random() * window.innerWidth;
  var y = Math.random() * (window.innerHeight ) ;

對此：

  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;