Javascript 画布径向渐变动画_Javascript_Html_Canvas

Javascript 画布径向渐变动画
javascript html canvas
Javascript 画布径向渐变动画,javascript,html,canvas,Javascript,Html,Canvas,我的脚本需要一些帮助。我试图让“亮点”随着鼠标在我的画布上移动，但看起来它的移动速度比coursor快。问题在哪里 <!DOCTYPE HTML> <html> <head> <style> body { position:absolute; margin: 0px; padding: 0px; } canvas{ position: fixed;
我的脚本需要一些帮助。我试图让“亮点”随着鼠标在我的
画布上移动，但看起来它的移动速度比coursor快。问题在哪里
<!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>  


身体{
位置：绝对位置；
边际：0px；
填充：0px；
}
帆布{
位置：固定；
高度：900px；
宽度：900px；
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
window.onmousemove=function（）{
clearRect（0，0，canvas.width，canvas.height）；
rect（0，0，canvas.width，canvas.height）；
//创建径向渐变
var grd=context.createRadialGradient（event.clientX，event.clientY，5，event.clientX+20，event.clientY+20100）；
//浅蓝色
grd.addColorStop（0，#ffffff'）；
//深蓝色
grd.addColorStop（0.5，#000000'）；
context.fillStyle=grd；
context.fill（）；
};
window.onclick=function（）{
警报（“X:+event.clientX++”Y:+event.clientY）
}
将鼠标事件和渲染分开，因为鼠标事件未同步到显示器。鼠标事件仅记录鼠标状态（每秒最多100多个采样）。仅当能够以60fps的速度显示画布内容时，动画帧才会渲染
只需创建一次渐变，然后使用2D canvas API中的转换函数移动渐变
还要确保画布分辨率（画布上的像素数）与画布占用的CSS像素数匹配

//准备好后启动主循环
requestAnimationFrame（主循环）；
//获取画布上下文
const ctx=can.getContext（“2d”）；
//设置鼠标
文件。添加的事件列表器（“mousemove”，mEvent）；
函数mEvent（e）{mouse.x=e.pageX；mouse.y=e.pageY}
常数鼠标={x:0，y:0}；
//创建Gardent
常数梯度=ctx.createRadialGradient（0,0,0,0,0,100）；
渐变色停止（0，“rgb（255255）”；
渐变色停止（1，“rgb（0,0,0）”；
//requestAnimationFrame回调函数
函数mainLoop（）{
//根据需要调整画布的大小
if（can.width！==内部宽度| | can.height！==内部高度）{
can.width=innerWidth；//如果
can.height=innerHeight；//已调整窗口大小
}
//将画布原点设置为鼠标坐标（移动渐变）
setTransform（1,0,0,1，mouse.x，mouse.y）；
ctx.fillStyle=梯度；
//用矩形填充画布
ctx.fillRect（-mouse.x，-mouse.y，can.width，can.height）；
requestAnimationFrame（主循环）；
}
画布{
位置：绝对位置；
顶部：0px；
左：0px；
}
将鼠标事件和渲染分开，因为鼠标事件未同步到显示器。鼠标事件仅记录鼠标状态（每秒最多100多个采样）。仅当能够以60fps的速度显示画布内容时，动画帧才会渲染
只需创建一次渐变，然后使用2D canvas API中的转换函数移动渐变
还要确保画布分辨率（画布上的像素数）与画布占用的CSS像素数匹配

//准备好后启动主循环
requestAnimationFrame（主循环）；
//获取画布上下文
const ctx=can.getContext（“2d”）；
//设置鼠标
文件。添加的事件列表器（“mousemove”，mEvent）；
函数mEvent（e）{mouse.x=e.pageX；mouse.y=e.pageY}
常数鼠标={x:0，y:0}；
//创建Gardent
常数梯度=ctx.createRadialGradient（0,0,0,0,0,100）；
渐变色停止（0，“rgb（255255）”；
渐变色停止（1，“rgb（0,0,0）”；
//requestAnimationFrame回调函数
函数mainLoop（）{
//根据需要调整画布的大小
if（can.width！==内部宽度| | can.height！==内部高度）{
can.width=innerWidth；//如果
can.height=innerHeight；//已调整窗口大小
}
//将画布原点设置为鼠标坐标（移动渐变）
setTransform（1,0,0,1，mouse.x，mouse.y）；
ctx.fillStyle=梯度；
//用矩形填充画布
ctx.fillRect（-mouse.x，-mouse.y，can.width，can.height）；
requestAnimationFrame（主循环）；
}
画布{
位置：绝对位置；
顶部：0px；
左：0px；
}
您正在使用CSS调整画布的大小，而不设置其自身的宽度和高度属性。上下文只知道此属性的大小，而不知道显示的（CSS）属性的大小。还请注意，在每次鼠标移动时创建渐变通常是个坏主意。而是在屏幕外画布上绘制一次渐变，然后在正确的位置绘制这个屏幕外画布。好了，现在我明白了。谢谢您正在使用CSS调整画布的大小，而不设置其自身的宽度和高度属性。上下文只知道此属性的大小，而不知道显示的（CSS）属性的大小。还请注意，在每次鼠标移动时创建渐变通常是个坏主意。而是在屏幕外画布上绘制一次渐变，然后在正确的位置绘制这个屏幕外画布。好了，现在我明白了。非常感谢。