canvas跟随鼠标闪电动画交互效果代码-html代码-BFW代码库

canvas跟随鼠标闪电动画交互效果代码

代码语言：html

所属分类：动画

代码描述：canvas跟随鼠标闪电动画交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    canvas, body{
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->

    <!-- partial -->
    <script >
        var width, height
var step = 0;
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')

var bg = [13, 27, 34]



document.getElementsByTagName('body')[0].appendChild(canvas)

// mouse coordinates
// var mousex = window.innerWidth / 2, mousey = window.innerHeight;
document.onmousedown = function(e){
  // pt = pt === pt1 ? pt2 : pt1
  pt2.x = e.pageX;
  pt2.y = e.pageY;
}
document.onmousemove = function(e){
  pt1.x = e.pageX;
  pt1.y = e.pageY;
}
var pt1 = {x:window.innerWidth*0.2, y:window.innerHeight*0.3}
var pt2 = {x:window.innerWidth*0.8, y:window.innerHeight*0.7}
    
window.addEventListener('resize', setup)

setup()

function setup() {
  canvas.width = width = window.innerWidth
  canvas.height = height = window.innerHeight
  
  ctx.beginPath();
  ctx.rect(0, 0, width, height)
  ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
  ctx.fill()
  
  pt1 = {x:window.innerWidth*0.2, y:window.innerHeight*0.2}
  pt2 = {x:window.innerWidth*0.8, y:window.innerHeight*0.8}
  // draw()
}

setInterval(animate, 60)
// window.requestAnimatio.........完整代码请登录后点击上方下载按钮下载查看