画布径向渐变动画

Question

I need some help with my script. 我的脚本需要一些帮助。 I'm trying to make the "bright spot" move along with the mouse on my canvas but it looks like it's moving way faster than the coursor. 我正在尝试使“亮点”与鼠标一起在canvas上移动，但看起来它的移动速度比光标快。 Where is the problem? 问题出在哪儿？

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
    position:absolute;
        margin: 0px;
        padding: 0px;
      }
      canvas{
    position: fixed;
    height:900px;
    Width:900px;
    }

    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      window.onmousemove=function(){
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.rect(0, 0, canvas.width, canvas.height);

      // create radial gradient
      var grd = context.createRadialGradient(event.clientX, event.clientY, 5, event.clientX+20, event.clientY+20, 100);
      // light blue
      grd.addColorStop(0, '#ffffff');
      // dark blue
      grd.addColorStop(0.5, '#000000');

      context.fillStyle = grd;
      context.fill();
      };

    window.onclick= function(){
        alert("X: " + event.clientX + " " +"Y: " + event.clientY)
    }
    </script>
  </body>
</html>

Answer 1

Keep the mouse events and rendering separate as mouse events are not synced to the display. 由于鼠标事件未同步到显示器，因此请将鼠标事件和渲染分开。 Mouse events just record mouse state (up to and over 100+ samples a second.) Animation frames render only when able to display the canvas content 60fps. 鼠标事件仅记录鼠标状态（每秒多达100多个采样）。仅当能够以60fps的速度显示画布内容时，才会渲染动画帧。

Just create the gradient once and move it using the transformation functions in the 2D canvas API. 只需创建一次渐变，然后使用2D canvas API中的转换功能将其移动即可。

Also make sure that the canvas resolution (number pixels on the canvas) matches the number of CSS pixels the canvas occupies. 还要确保画布分辨率（画布上的像素数）与画布占用的CSS像素数匹配。

 // start the main loop when ready requestAnimationFrame(mainLoop); // get the canvas context const ctx = can.getContext("2d"); // set up mouse document.addEventListener("mousemove", mEvent); function mEvent(e) { mouse.x = e.pageX; mouse.y = e.pageY } const mouse = { x: 0, y: 0 }; // create gardient const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, 100); grad.addColorStop(0, "rgb(255,255,255)"); grad.addColorStop(1, "rgb(0,0,0)"); // requestAnimationFrame callback function function mainLoop() { // resize canvas if needed if (can.width !== innerWidth || can.height !== innerHeight) { can.width = innerWidth; // resize canvas if can.height = innerHeight; // window resized } // set canvas origin to the mouse coords (moves the gradient) ctx.setTransform(1, 0, 0, 1, mouse.x, mouse.y); ctx.fillStyle = grad; // fill canvas with a rectangle ctx.fillRect(-mouse.x, -mouse.y, can.width, can.height); requestAnimationFrame(mainLoop); }

 canvas { position: absolute; top: 0px; left: 0px; }

 <canvas id="can"></canvas>

画布径向渐变动画

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-06-21 11:30:23

画布径向渐变动画

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-06-21 11:30:23

解决方案1
2 已采纳 2017-06-21 11:30:23