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 = 800canvas.height = 800const 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().leftconst y = event.clientY - canvas.getBoundingClientRect().topfor (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 = 800canvas.height = 800const 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().leftconst y = event.clientY - canvas.getBoundingClientRect().topdraw(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"> </a><a href="#" class="color-btn" id="black-color-btn"> </a></div></div><script>const canvas = document.getElementById('canvas')canvas.width = 1200canvas.height = 800const context = canvas.getContext('2d')const balls = []let isMoving = truelet 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 + 20const 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 = falsethis.text = '开始运动'} else {isMoving = truethis.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].colorcxt.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].vxballs[i].y += balls[i].vyif (balls[i].x - balls[i].radius <= 0) {balls[i].vx = -balls[i].vxballs[i].x = balls[i].radius}if (balls[i].x + balls[i].radius >= canvasWidth) {balls[i].vx = -balls[i].vxballs[i].x = canvasWidth - balls[i].radius}if (balls[i].y - balls[i].radius <= 0) {balls[i].vy = -balls[i].vyballs[i].y = balls[i].radius}if (balls[i].y - balls[i].radius >= canvasHeight) {balls[i].vy = -balls[i].vyballs[i].y = canvasHeight - balls[i].radius}}}</script>
</body></html>图示：
1
相关文章：
canvas基础3 -- 交互
点击交互 使用 isPointInPath(x, y) 判断鼠标点击位置在不在图形内 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&…...
Flutter——最详细(Scaffold)使用教程
Scaffold简介 相当于界面的主体（类似于安卓最外层PhoneWindow），组件的展示都必须依附于它。 使用场景： 每一个界面都是脚手架，通过它来进行架构实现，优美的布局效果。 属性作用appBar顶部的标题栏body显示整…...
C语言编写图形化界面-创建按钮-为其指定样式
文章目录 前置章节指定窗口样式给按钮加边框扁平化按钮复选框样式按钮自动复选框 单选按钮三态按钮自动三态按钮 默认按钮样式（对话框Enter键） 设置按钮位置和大小封装函数 前置章节 开始之前，需要学习以下章节： 创建窗口 窗口过…...
 | 创建多个线程时数据共享的问题)
C++并发与多线程(7) | 创建多个线程时数据共享的问题
一、创建和等待多个线程 借助vector存放多个线程thread对象，借助vector和它的迭代器实现创建和运行多个线程，代码如下： #include <iostream> #include <thread> #include <vector> using namespace std;void myprint(int inum) {cout << "mypr…...
进程间通信（匿名管道、命名管道、消息队列、共享内存、信号量、信号、Socket）
文章目录 一、什么是进程间通信二、管道1.匿名管道(pipe)a).创建匿名管道b).管道的读写规则c).匿名管道的特点 2.有名管道(FIFO)a).创建命名管道b).命名管道的特点c).基于命名管道的进程间通信（服务端/客户端） 三、消息队列四、共享内存1.什么是共享内存…...
浅谈中国汽车充电桩行业市场状况及充电桩选型的介绍
安科瑞虞佳豪 车桩比降低是完善新能源汽车行业配套的一大重要趋势，目前各国政府都在努力推进政策，通过税收减免、建设补贴等措施提升充电桩建设速度，以满足新能源汽车需求。 近年来，在需求和技术的驱动下，充电桩的平…...
Postgresql在jdbc处理bit字段的解决方案
问题： bit如果长度为1，则会默认为布尔型（1-true 0-false）； bit如果长度大于1，则会默认为bit类型，但是代码中以前常用的两种set方式，会报错 第一种方式： ps.setObject(i1,…...
ESMapping字段
在 Elasticsearch 中，字段（field）是指用于表示数据的最小单元。每个文档（document）都由一个或多个字段组成，字段存储了文档的不同属性或数据。 字段可以包含不同的数据类型，如文本、数字、日期…...
基于LDA的隐式标签协同过滤推荐算法_文勇军
， 王全民等人［１４］提出了一种交替奇异值分解算法 （ＡＳＶＤ），即结合协同过滤和隐语义分析的混合推荐 算法。唐泽坤等人［１５］融合聚类算法和协同过滤推荐 算法，取得了一定效果。高娜等人［１６⁃１９］将标签因子 和协同过滤推荐算法结合研究缓解了数据稀疏问题，但这…...
在线设计数据库表用Itbuilder，极简易用真香！！！
“如果您想要一个具有快速搜索运行的高性能数据库，那么数据库设计是必不可少的，花时间设计数据库将帮助您避免效率低下和高冗余等问题”。 在线数据库设计软件itbuilder，界面清爽漂亮，功能简洁，没有多余设置很容易上手…...
onclick事件的用法
onclick 事件是一种在网页开发中用来处理用户点击操作的事件。它通常用于 HTML 元素（如按钮、链接、图像等），以便在用户单击该元素时触发 JavaScript 函数或执行一些特定的操作。以下是 onclick 事件的用法： HTML 元素上的 onclic…...
二叉排序树
二叉排序树定义及性质 二叉排序树(Binary Sort Tre)或者是一棵空树，或者是具有如下性质的二叉树： (1) 若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值； (2) 若它的右子树不空，则右子树上所有结点的值均…...
探秘Spring的设计精髓，深入解析架构原理
序员与平庸的程序员之间的区别，是在于认为自己的代码重要还是数据结构更加重要。平庸的程序员眼里只有代码，优秀的程序员则关注数据结构及之前的关系。” 1、spring的设计理念 spring提供了一个轻量级的开发框架，抽象了实际开发中的很多共…...
Python Wordcloud报错：Only supported for TrueType fonts，多种解决方案
Python Wordcloud报错：Only supported for TrueType fonts，多种解决方案。 报错内容如下： 2023-10-26T09:35:41.190459839Z Traceback (most recent call last): 2023-10-26T09:35:41.190502589Z File “lib/task/compute.py”, line 621, i…...
为虚拟网络提供敏捷负载均衡：Everoute LB 特性解读
为了保证应用系统的可用性，同时避免并发访问导致后端服务器出现性能瓶颈，不少用户都通过负载均衡技术优化流量分发。随着虚拟化平台下用户业务规模的持续扩大，虚拟化网络的数据访问量也不断增加，而传统负载均衡通常通过硬件负载均…...
Jmeter 接口测试，参数值为列表，如何参数化？
最近在我的教学过程中，我的一个学生问了我一个问题，他们公司的一个接口参数值是列表，列表中值的数量有多有少，问我在 jmeter 中如何让这个参数的值进行参数化？ 看到这种问题，你的第一反应是什么？…...
DeepinV20实现使用CapsLock键切换输入法
概览 起因参考资料解决问题1. 删除CapsLock键映射关系2. 新建CapsLock键映射关系3. 建立配置文件4. **注销用户或者重启电脑**5. 修改切换输入法快捷键6. 测试输入 起因 看同事的MacBook可以使用CapsLock键切换输入法，而我作为Shift党CapsLock键几乎不使用…...
基于springboot实现校友社交平台管理系统项目【项目源码+论文说明】计算机毕业设计
基于springboot实现校友社交平台管理系统演示 摘要 校友社交系统提供给用户一个校友社交信息管理的网站，最新的校友社交信息让用户及时了解校友社交动向,完成校友社交的同时,还能通过论坛中心进行互动更方便。本系统采用了B/S体系的结构，使用了java技…...
WordPress主题模板 大前端D8 5.1版本完整开源版源码简洁大气多功能配置
源码测评：该模板官方已更新至5.2，但是这个5.1也是非常好用的，经测试所有页面均完好，推荐下载使用。 模板简介： 大前端D8 主题是一款非常牛逼的WordPress博客主题,响应式,功能齐全,支持手机,电脑,平板,非常适合做博客站…...
如何在Postman中使用静态HTTP
首先，打开 Postman 软件。在 Postman 的菜单栏中，点击 “Preferences”（偏好设置）。 亲身经验：我自己尝试了这个方法，发现它非常适用于需要使用HTTP的场景。 数据和引证：根据 Postman 官方文档…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址：LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂，正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构：由肠系膜上静脉和脾静脉汇合构成，是肝脏血液供应的主要来源。淤血后果：门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血，引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...