canvas基础3 -- 交互

点击交互

使用 isPointInPath(x, y) 判断鼠标点击位置在不在图形内

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:10px auto;"></canvas>
  </div>

  <script>
    const canvas = document.getElementById('canvas')
    canvas.width = 800
    canvas.height = 800
    const context = canvas.getContext('2d')

    const balls = []
    for(let i = 0; i < 10; i++) {
      const ball = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: Math.random() * 50 + 20
      }

      balls[i] = ball
    }

    draw()
    canvas.addEventListener('mouseup', detect)

    function draw() {
      for(let i = 0; i < balls.length; i++) {
        context.beginPath()
        context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI*2)
        context.fillStyle = '#058'
        context.fill()
      }
    }

    function detect(event) {
      const x = event.clientX - canvas.getBoundingClientRect().left
      const y = event.clientY - canvas.getBoundingClientRect().top

      for (let i = 0; i < balls.length; i++) {
        context.beginPath()
        context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2)

        if (context.isPointInPath(x, y)) {
          context.fillStyle = 'red'
          context.fill()
        }
      }
    }

    
  </script>
</body>

</html>

图示:

鼠标移动事件

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:10px auto;"></canvas>
  </div>

  <script>
    const canvas = document.getElementById('canvas')
    canvas.width = 800
    canvas.height = 800
    const context = canvas.getContext('2d')

    const balls = []
    for(let i = 0; i < 10; i++) {
      const ball = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: Math.random() * 50 + 20
      }

      balls[i] = ball
    }

    draw()
    canvas.addEventListener('mousemove', detect)

    function draw(x, y) {
      context.clearRect(0, 0, canvas.width, canvas.height)
      for(let i = 0; i < balls.length; i++) {
        context.beginPath()
        context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI*2)

        if(context.isPointInPath(x, y)) {
          context.fillStyle = 'red'
        } else {
          context.fillStyle = '#058'
        }
        
        context.fill()
      }
    }

    function detect(event) {
      const x = event.clientX - canvas.getBoundingClientRect().left
      const y = event.clientY - canvas.getBoundingClientRect().top

      draw(x, y)
    }

    
  </script>
</body>

</html>

图示:

在Canvas上使用HTML元素进行交互

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas-wrapper {
      width: 1200px;
      height: 800px;
      position: relative;
      margin: 20px auto;
    }

    #canvas {
      border: 1px solid #aaa;
    }

    #controller {
      position: absolute;
      top: 30px;
      left: 30px;
      background-color: rgba(0, 85, 116, 0.7);
      padding: 5px 20px 25px 20px;
      border-radius: 10px 10px;
    }

    #controller h1 {
      color: white;
      font-weight: bold;
      font-family: Microsoft Yahei;
    }

    #controller #canvas-btn {
      display: inline-block;
      background-color: #8b0;
      color: white;
      font-size: 14px;
      padding: 5px 15px;
      border-radius: 6px;
      text-decoration: none;
      margin-top: 10px;
      margin-right: 20px;
    }

    #controller #canvas-btn:hover {
      background-color: #7a0;
    }

    #controller .color-btn {
      display: inline-block;
      font-size: 14px;
      padding: 5px 15px;
      border-radius: 6px;
      text-decoration: none;
      margin-top: 10px;
      margin-right: 5px;
    }

    #white-color-btn {
      background: white;
    }

    #black-color-btn {
      background: black;
    }
  </style>
</head>

<body>
  <div id="canvas-wrapper">
    <canvas id="canvas"></canvas>
    <div id="controller">
      <h1>Canvas 绘图之旅</h1>
      <a href="#" id="canvas-btn">停止运动</a>
      <a href="#" class="color-btn" id="white-color-btn">&nbsp;</a>
      <a href="#" class="color-btn" id="black-color-btn">&nbsp;</a>
    </div>
  </div>
  
  <script>
    const canvas = document.getElementById('canvas')
    canvas.width = 1200
    canvas.height = 800
    const context = canvas.getContext('2d')

    const balls = []
    let isMoving = true
    let themeColor = 'white'
    for(let i = 0; i < 100; i++) {
      const R = Math.floor(Math.random() * 255)
      const G = Math.floor(Math.random() * 255)
      const B = Math.floor(Math.random() * 255)
      const radius = Math.random() * 50 + 20

      const ball = {
        color: `rgb(${R}, ${G}, ${B})`,
        radius,
        x: Math.random() * (canvas.width - 2*radius) + radius,
        y: Math.random() * (canvas.height - 2*radius) + radius,
        vx: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random()*100)),
        vy: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random() * 100)),
      }

      balls[i] = ball
    }

    setInterval(function() {
      draw(context)
      if(isMoving) {
        update(canvas.width, canvas.height)
      }
    }, 50)

    document.getElementById('canvas-btn').onclick = function() {
      if (isMoving) {
        isMoving = false
        this.text = '开始运动'
      } else {
        isMoving = true
        this.text = '停止运动'
      }
    }

    document.getElementById('white-color-btn').onclick = function() {
      themeColor = 'white'
      return false
    }

    document.getElementById('black-color-btn').onclick = function () {
      themeColor = 'black'
      return false
    }

    function draw(cxt) {
      cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)

      if (themeColor === 'black') {
        cxt.fillStyle = 'black'
        cxt.fillRect(0, 0, cxt.canvas.width, cxt.canvas.height)
      }
      for(let i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color
        cxt.beginPath()
        cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2)
        cxt.closePath()
        cxt.fill()
      }
    }

    function update(canvasWidth, canvasHeight) {
      for (let i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx
        balls[i].y += balls[i].vy

        if (balls[i].x - balls[i].radius <= 0) {
          balls[i].vx = -balls[i].vx
          balls[i].x = balls[i].radius
        }

        if (balls[i].x + balls[i].radius >= canvasWidth) {
          balls[i].vx = -balls[i].vx
          balls[i].x = canvasWidth - balls[i].radius
        }

        if (balls[i].y - balls[i].radius <= 0) {
          balls[i].vy = -balls[i].vy
          balls[i].y = balls[i].radius
        }

        if (balls[i].y - balls[i].radius >= canvasHeight) {
          balls[i].vy = -balls[i].vy
          balls[i].y = canvasHeight - balls[i].radius
        }
      }
    }

    
  </script>
</body>

</html>

图示:

1

相关推荐
凡人的AI工具箱2 分钟前
40分钟学 Go 语言高并发:Pipeline模式(一)
开发语言·后端·缓存·架构·golang
achaoyang11 分钟前
【Python中while循环】
开发语言·python
呆呆小雅13 分钟前
C# 封装
java·开发语言·c#
蒜蓉大猩猩20 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
南鸳61033 分钟前
Scala:根据身份证号码,输出这个人的籍贯
开发语言·后端·scala
Clockwiseee40 分钟前
JS原型、原型链以及原型链污染学习
javascript·学习·原型模式
eclipsercp1 小时前
PyQt5:Python GUI开发的超级英雄
开发语言·python·qt
军训猫猫头1 小时前
44.扫雷第二部分、放置随机的雷,扫雷,炸死或成功 C语言
c语言·开发语言
北巷!!1 小时前
宇信科技JAVA笔试(2024-11-26日 全部AK)
java·开发语言·科技
ᝰꫝꪉꪯꫀ3611 小时前
JavaWeb——SpringBoot原理
java·开发语言·后端·springboot