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 官方文档…...
vscode 提升Vue开发效率的必备插件与工具
1，Vetur：提供了Vue语法高亮、智能提示、代码片段、错误检查和格式化等功能，是Vue开发中必不可少的插件。 2，ESLint：用于检查和修复JavaScript和Vue代码中的语法错误和潜在问题，提高代码质量。 3ÿ…...
mysql/java/springboot/javaweb请假系统，分为学生/辅导员/超级管理员
源码下载地址 支持：远程部署/安装/调试、讲解、二次开发/修改/定制 系统分为 学生/辅导员/超级管理员 学生 辅导员 超级管理员...
Android11系统桌面隐藏指定APP图标
做项目时有时会遇到这样的需求，客户要求隐藏Launcher3桌面的某个app图标，但是又不能删除去掉这个app，具体修改如下： diff --git a/src/com/android/launcher3/model/LoaderTask.java b/src/com/android/launcher3/model/LoaderTa…...
WEB使用百度地图展示某地地址
第一步 进入百度地图开发平台 百度地图开放平台 | 百度地图API SDK | 地图开发 第二步注册 获取AK秘钥，点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问 下面…...
22年上半年下午题
第一大题题目 第一大题解答 第一小问 看加工交互和说明来得出实体的名字。如果不太确定，可以多去看几条数据流来确认答案。仔细一点，这分稳啦。 第二小问 需要对应加工结合说明得出数据存储的名称。 一般可以在后面加上表字或者加上信息表。自拟&…...
大文件分片上传-续传-秒传（详解）
前言 前面记录过使用库实现的大文件的分片上传 基于WebUploader实现大文件分片上传 基于vue-simple-uploader 实现大文件分片上传 前面记录过基于库实现的大文件的分片上传，那如果不使用库， 文件分片是怎么实现的，该怎么做到呢？…...
CE-LVD证书跟CE-EMC证书有什么区别？
CE-LVD证书跟CE-EMC证书有什么区别？ CE-LVD证书跟CE-EMC证书有什么区别？ 近日，TEMU平台电器需提交CE-LVD证书，不再接受EMC证书---玩具产品需提交满足玩具法规的CE证书，法规总是多变的，卖家也是很苦恼&…...
使用Mapster实现双向映射，解放搬砖体力活
经常会有对象属性互相赋值的操作，但是频繁的写实在是搬运工一样，比较难受比如下面两个类 public class AgencyBdm {public new int Id { set; get; }public string AgencyId { set; get; }public string AgencyName { set; get; }public string Region {…...
一种基于屏幕分辨率的RTSP主子码流切换的多路视频监控的播放方案
技术背景： 用户场景下，存在多个监控场所的100路监控摄像头，例如：大华、海康、宇视、杭州宇泛的枪机、球机、半球、NVR、DVR等不同类型的监控设备，通过视频监控平台进行设备的管理，通过RTSP拉流的方案管理监…...
SpringBoot日志+SpringMVC+UUID重命名文件+Idea热部署
目录 【SpringBoot日志】 什么是日志，日志的作用 关于日志的基本信息，又有哪些呢？ 关于日志的级别 Springboot内置SLF4J【门面模式】 和 logback【日志框架】 在配置文件中可以设置日志级别【以.yml为例】 SpringBoot 持久化的保存日…...