• canvas基础3 -- 交互

    点击交互

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:10px auto;"></canvas>
    12.   </div>
    13.  
    14.   <script>
    15.     const canvas = document.getElementById('canvas')
    16.     canvas.width = 800
    17.     canvas.height = 800
    18.     const context = canvas.getContext('2d')
    19.  
    20.     const balls = []
    21.     for(let i = 0; i < 10; i++) {
    22.       const ball = {
    23.         x: Math.random() * canvas.width,
    24.         y: Math.random() * canvas.height,
    25.         r: Math.random() * 50 + 20
    26.       }
    27.  
    28.       balls[i] = ball
    29.     }
    30.  
    31.     draw()
    32.     canvas.addEventListener('mouseup', detect)
    33.  
    34.     function draw() {
    35.       for(let i = 0; i < balls.length; i++) {
    36.         context.beginPath()
    37.         context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI*2)
    38.         context.fillStyle = '#058'
    39.         context.fill()
    40.       }
    41.     }
    42.  
    43.     function detect(event) {
    44.       const x = event.clientX - canvas.getBoundingClientRect().left
    45.       const y = event.clientY - canvas.getBoundingClientRect().top
    46.  
    47.       for (let i = 0; i < balls.length; i++) {
    48.         context.beginPath()
    49.         context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2)
    50.  
    51.         if (context.isPointInPath(x, y)) {
    52.           context.fillStyle = 'red'
    53.           context.fill()
    54.         }
    55.       }
    56.     }
    57.  
    58.     
    59.   </script>
    60. </body>
    61.  
    62. </html>

    图示：

    鼠标移动事件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:10px auto;"></canvas>
    12.   </div>
    13.  
    14.   <script>
    15.     const canvas = document.getElementById('canvas')
    16.     canvas.width = 800
    17.     canvas.height = 800
    18.     const context = canvas.getContext('2d')
    19.  
    20.     const balls = []
    21.     for(let i = 0; i < 10; i++) {
    22.       const ball = {
    23.         x: Math.random() * canvas.width,
    24.         y: Math.random() * canvas.height,
    25.         r: Math.random() * 50 + 20
    26.       }
    27.  
    28.       balls[i] = ball
    29.     }
    30.  
    31.     draw()
    32.     canvas.addEventListener('mousemove', detect)
    33.  
    34.     function draw(x, y) {
    35.       context.clearRect(0, 0, canvas.width, canvas.height)
    36.       for(let i = 0; i < balls.length; i++) {
    37.         context.beginPath()
    38.         context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI*2)
    39.  
    40.         if(context.isPointInPath(x, y)) {
    41.           context.fillStyle = 'red'
    42.         } else {
    43.           context.fillStyle = '#058'
    44.         }
    45.         
    46.         context.fill()
    47.       }
    48.     }
    49.  
    50.     function detect(event) {
    51.       const x = event.clientX - canvas.getBoundingClientRect().left
    52.       const y = event.clientY - canvas.getBoundingClientRect().top
    53.  
    54.       draw(x, y)
    55.     }
    56.  
    57.     
    58.   </script>
    59. </body>
    60.  
    61. </html>

    图示:

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.     #canvas-wrapper {
    10.       width: 1200px;
    11.       height: 800px;
    12.       position: relative;
    13.       margin: 20px auto;
    14.     }
    15.  
    16.     #canvas {
    17.       border: 1px solid #aaa;
    18.     }
    19.  
    20.     #controller {
    21.       position: absolute;
    22.       top: 30px;
    23.       left: 30px;
    24.       background-color: rgba(0, 85, 116, 0.7);
    25.       padding: 5px 20px 25px 20px;
    26.       border-radius: 10px 10px;
    27.     }
    28.  
    29.     #controller h1 {
    30.       color: white;
    31.       font-weight: bold;
    32.       font-family: Microsoft Yahei;
    33.     }
    34.  
    35.     #controller #canvas-btn {
    36.       display: inline-block;
    37.       background-color: #8b0;
    38.       color: white;
    39.       font-size: 14px;
    40.       padding: 5px 15px;
    41.       border-radius: 6px;
    42.       text-decoration: none;
    43.       margin-top: 10px;
    44.       margin-right: 20px;
    45.     }
    46.  
    47.     #controller #canvas-btn:hover {
    48.       background-color: #7a0;
    49.     }
    50.  
    51.     #controller .color-btn {
    52.       display: inline-block;
    53.       font-size: 14px;
    54.       padding: 5px 15px;
    55.       border-radius: 6px;
    56.       text-decoration: none;
    57.       margin-top: 10px;
    58.       margin-right: 5px;
    59.     }
    60.  
    61.     #white-color-btn {
    62.       background: white;
    63.     }
    64.  
    65.     #black-color-btn {
    66.       background: black;
    67.     }
    68.   </style>
    69. </head>
    70.  
    71. <body>
    72.   <div id="canvas-wrapper">
    73.     <canvas id="canvas"></canvas>
    74.     <div id="controller">
    75.       <h1>Canvas 绘图之旅</h1>
    76.       <a href="#" id="canvas-btn">停止运动</a>
    77.       <a href="#" class="color-btn" id="white-color-btn">&nbsp;</a>
    78.       <a href="#" class="color-btn" id="black-color-btn">&nbsp;</a>
    79.     </div>
    80.   </div>
    81.   
    82.   <script>
    83.     const canvas = document.getElementById('canvas')
    84.     canvas.width = 1200
    85.     canvas.height = 800
    86.     const context = canvas.getContext('2d')
    87.  
    88.     const balls = []
    89.     let isMoving = true
    90.     let themeColor = 'white'
    91.     for(let i = 0; i < 100; i++) {
    92.       const R = Math.floor(Math.random() * 255)
    93.       const G = Math.floor(Math.random() * 255)
    94.       const B = Math.floor(Math.random() * 255)
    95.       const radius = Math.random() * 50 + 20
    96.  
    97.       const ball = {
    98.         color: `rgb(${R}, ${G}, ${B})`,
    99.         radius,
    100.         x: Math.random() * (canvas.width - 2*radius) + radius,
    101.         y: Math.random() * (canvas.height - 2*radius) + radius,
    102.         vx: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random()*100)),
    103.         vy: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random() * 100)),
    104.       }
    105.  
    106.       balls[i] = ball
    107.     }
    108.  
    109.     setInterval(function() {
    110.       draw(context)
    111.       if(isMoving) {
    112.         update(canvas.width, canvas.height)
    113.       }
    114.     }, 50)
    115.  
    116.     document.getElementById('canvas-btn').onclick = function() {
    117.       if (isMoving) {
    118.         isMoving = false
    119.         this.text = '开始运动'
    120.       } else {
    121.         isMoving = true
    122.         this.text = '停止运动'
    123.       }
    124.     }
    125.  
    126.     document.getElementById('white-color-btn').onclick = function() {
    127.       themeColor = 'white'
    128.       return false
    129.     }
    130.  
    131.     document.getElementById('black-color-btn').onclick = function () {
    132.       themeColor = 'black'
    133.       return false
    134.     }
    135.  
    136.     function draw(cxt) {
    137.       cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)
    138.  
    139.       if (themeColor === 'black') {
    140.         cxt.fillStyle = 'black'
    141.         cxt.fillRect(0, 0, cxt.canvas.width, cxt.canvas.height)
    142.       }
    143.       for(let i = 0; i < balls.length; i++) {
    144.         cxt.fillStyle = balls[i].color
    145.         cxt.beginPath()
    146.         cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2)
    147.         cxt.closePath()
    148.         cxt.fill()
    149.       }
    150.     }
    151.  
    152.     function update(canvasWidth, canvasHeight) {
    153.       for (let i = 0; i < balls.length; i++) {
    154.         balls[i].x += balls[i].vx
    155.         balls[i].y += balls[i].vy
    156.  
    157.         if (balls[i].x - balls[i].radius <= 0) {
    158.           balls[i].vx = -balls[i].vx
    159.           balls[i].x = balls[i].radius
    160.         }
    161.  
    162.         if (balls[i].x + balls[i].radius >= canvasWidth) {
    163.           balls[i].vx = -balls[i].vx
    164.           balls[i].x = canvasWidth - balls[i].radius
    165.         }
    166.  
    167.         if (balls[i].y - balls[i].radius <= 0) {
    168.           balls[i].vy = -balls[i].vy
    169.           balls[i].y = balls[i].radius
    170.         }
    171.  
    172.         if (balls[i].y - balls[i].radius >= canvasHeight) {
    173.           balls[i].vy = -balls[i].vy
    174.           balls[i].y = canvasHeight - balls[i].radius
    175.         }
    176.       }
    177.     }
    178.  
    179.     
    180.   </script>
    181. </body>
    182.  
    183. </html>

    图示：

    刮刮乐

    1. <!DOCTYPE html>
    2. <html lang="en" style="height:100%;">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Document</title>
    7. </head>
    8. <body style="height:100%;">
    9.   <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin: 20px auto;"></canvas>
    10.  
    11.   <script>
    12.     const canvas = document.getElementById('canvas')
    13.     canvas.width = 1152
    14.     canvas.height = 768
    15.     const ctx = canvas.getContext('2d')
    16.  
    17.     // 绘制底部显示中奖区域
    18.     const arr = ["img2.png"]
    19.     const number = Math.floor(Math.random() * arr.length)
    20.     canvas.style.background = "url(" + arr[number] + ")"
    21.     canvas.style.backgroundSize = "100%"
    22.  
    23.     // 绘制遮盖区域
    24.     const image = new Image()
    25.     image.src = "img1.png"
    26.     image.onload = function () {
    27.       ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
    28.       ctx.font = 'bold 40px PingFang SC'
    29.       ctx.fillStyle = '#C96048'
    30.       ctx.textAlign = 'center'
    31.       ctx.textBaseline = 'middle'
    32.       ctx.fillText('刮刮我，有惊喜～', 576, 384)
    33.     }
    34.  
    35.     let status = false
    36.  
    37.     canvas.onmousedown = function (e) {
    38.       e.preventDefault()
    39.       status = true
    40.     }
    41.  
    42.     canvas.onmouseup = function (e) {
    43.       e.preventDefault()
    44.       status = false
    45.     }
    46.  
    47.     canvas.onmousemove = function (e) {
    48.       e.preventDefault()
    49.       if (status == true) {
    50.         const x = e.clientX - canvas.getBoundingClientRect().left
    51.         const y = e.clientY - canvas.getBoundingClientRect().top
    52.         ctx.globalCompositeOperation = "destination-out"
    53.         ctx.beginPath()
    54.         ctx.arc(x, y, 20, 0, 2 * Math.PI)
    55.         ctx.closePath()
    56.         ctx.fill()
    57.         const rate = getFilledPercentage()
    58.         console.log(rate)
    59.         if (rate > 60) {
    60.           ctx.clearRect(0, 0, canvas.width, canvas.height)
    61.         }
    62.       }
    63.     }
    64.  
    65.     // 计算已经刮过的区域占整个区域的百分比
    66.     function getFilledPercentage() {
    67.       const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    68.  
    69.       // imgData.data是个数组，存储着指定区域每个像素点的信息，数组中4个元素表示一个像素点的rgba值
    70.       const pixels = imgData.data
    71.  
    72.       const transPixels = []
    73.       for (let i = 0; i < pixels.length; i += 4) {
    74.         // 严格上来说，判断像素点是否透明需要判断该像素点的a值是否等于0，
    75.         // 为了提高计算效率，这儿设置当a值小于128，也就是半透明状态时就可以了
    76.         if (pixels[i + 3] < 128) {
    77.           transPixels.push(pixels[i + 3])
    78.         }
    79.       }
    80.       return (transPixels.length / (pixels.length / 4) * 100).toFixed(2)
    81.     }
    82.   </script>
    83. </body>
    84. </html>

    图示：

    2

    1

  • 相关阅读:
    吃透Redis（七）：网络框架篇-redis 6.0 IO多线程原子性保证
    剖析一下“抢茅台“脚本底层逻辑
    为什么Netty NioEventLoopGroup的线程数默认为CPU核心数_2？
    基于spring boot的医疗管理系统 /基于java的医疗系统
    React 的学习笔记
    领航未来，2022 世界人工智能大会「元宇宙的数字原生进化」论坛等你来！
    关于CPP类中字符串成员初始化
    可持续化线段树（主席树）几种用法总结
    集群、分布式、微服务的区别和介绍
    java面试题ConcurrentHashMap 的工作原理及代码实现
  • 原文地址：https://blog.csdn.net/m0_38066007/article/details/134028483