canvas基础3 -- 交互

沿着路走到底

已于 2023-11-22 16:02:49 修改

阅读量1.3k

点赞数

分类专栏：可视化文章标签：交互 javascript 开发语言

于 2023-10-25 11:23:02 首次发布

本文链接：https://blog.csdn.net/m0_38066007/article/details/134028483

版权

可视化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

点击交互

使用 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>

图示：

刮刮乐

<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="height:100%;">
  <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin: 20px auto;"></canvas>

  <script>
    const canvas = document.getElementById('canvas')
    canvas.width = 1152
    canvas.height = 768
    const ctx = canvas.getContext('2d')

    // 绘制底部显示中奖区域
    const arr = ["img2.png"]
    const number = Math.floor(Math.random() * arr.length)
    canvas.style.background = "url(" + arr[number] + ")"
    canvas.style.backgroundSize = "100%"

    // 绘制遮盖区域
    const image = new Image()
    image.src = "img1.png"
    image.onload = function () {
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
      ctx.font = 'bold 40px PingFang SC'
      ctx.fillStyle = '#C96048'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText('刮刮我，有惊喜～', 576, 384)
    }

    let status = false

    canvas.onmousedown = function (e) {
      e.preventDefault()
      status = true
    }

    canvas.onmouseup = function (e) {
      e.preventDefault()
      status = false
    }

    canvas.onmousemove = function (e) {
      e.preventDefault()
      if (status == true) {
        const x = e.clientX - canvas.getBoundingClientRect().left
        const y = e.clientY - canvas.getBoundingClientRect().top
        ctx.globalCompositeOperation = "destination-out"
        ctx.beginPath()
        ctx.arc(x, y, 20, 0, 2 * Math.PI)
        ctx.closePath()
        ctx.fill()
        const rate = getFilledPercentage()
        console.log(rate)
        if (rate > 60) {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
        }
      }
    }

    // 计算已经刮过的区域占整个区域的百分比
    function getFilledPercentage() {
      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)

      // imgData.data是个数组，存储着指定区域每个像素点的信息，数组中4个元素表示一个像素点的rgba值
      const pixels = imgData.data

      const transPixels = []
      for (let i = 0; i < pixels.length; i += 4) {
        // 严格上来说，判断像素点是否透明需要判断该像素点的a值是否等于0，
        // 为了提高计算效率，这儿设置当a值小于128，也就是半透明状态时就可以了
        if (pixels[i + 3] < 128) {
          transPixels.push(pixels[i + 3])
        }
      }
      return (transPixels.length / (pixels.length / 4) * 100).toFixed(2)
    }
  </script>
</body>
</html>

图示：