canvas笔记-canvas中用户与图形交互

运行截图如下：

点击某个圆后：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>let balls = [];let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");window.onload = function(){canvas.width = 800;canvas.height = 800;for(let i = 0; i < 10; i++){let 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){let x = event.clientX - canvas.getBoundingClientRect().left;let y = event.clientY - canvas.getBoundingClientRect().top;console.log("x:" + x + "  y:" + y);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>

这里简单说下逻辑，通过canvas.addEventListener监听鼠标弹起的事件，然后通过

let x = event.clientX - canvas.getBoundingClientRect().left;
let y = event.clientY - canvas.getBoundingClientRect().top;

获取当前再canvas中的点的坐标，每次鼠标弹起的时候就进行重绘。

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

isPointInPath()方法当点位于当前路径中，则返回true，否则返回false

下面给出另外一种方法：

function mouseoverFunction(event){let mouseX = event.offsetX;let mouseY = event.offsetY;for(let i = 0; i < XXXXXXXObjects.length; i++){if((XXXXXXXObjects[i].x <= mouseX && (XXXXXXXObjects[i].x + XXXXXXXObjects[i].width) >= mouseX) &&(XXXXXXXObjects[i].y <= mouseY && (XXXXXXXObjects[i].y + XXXXXXXObjects[i].height) >= mouseY)){XXXXXXXObjects[i].onClicked();}}
}

通过这种方式也可以获取x，y在canvas中的坐标，并且判断数组里面的图形，x，y是否在点击的坐标中，如果是就调用onClicked函数。

canvas笔记-canvas中用户与图形交互相关推荐

canvas笔记-canvas适应浏览器（填充整个页面）
这里有2个地方要设置: 1.html中的style. 2.在js中获取父类的width或height. 如下,第一个问题: index.html <!DOCTYPE html> <h ...
canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
首先是图片放缩程序运行截图如下: 拉动滑动条: 源码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
canvas笔记-canvas基本用法
这里有几个要注意的地方: 通过下面这两种方式设置画布的高度和宽度及通过下面这两种方式对不支持canvas浏览器进行提示: 及最后一点,在canvas画图和Qt上用QPainter一模一样,都是基 ...
canvas笔记-在canvas中使用其他HTML元素
这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮.然后使用JavaScript获取按钮的数据或者 ...
canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
这里首先演示下位移,这里使用的函数是translate(x, y)这个函数是叠加的,也就是说,当translate(100, 100),后再次调用translate(200, 200),那么最后圆点的 ...
Demo_使用canvas在Vue中绘制蚂蚁线(Ps中选择图形时出现的可动的虚线)
1. 需求效果需要一个蚂蚁线,周围边框可动,效果如下: 2. 实现代码 <template><div><canvas id="canvas" wid ...
【HTML5】在canvas上绘制简单的2D图形（+太极图）
canvas(画布) canvas 元素是H5中新增的一个重要元素,专门用来绘制图形.在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描 ...
Canvas学习笔记 Canvas的基础知识点
文章目录前言一.导航初始化属性与方法小demo 二.绘制功能 2.1.绘制矩形 2.1.1.非面向思想实现动画 2.1.2.面向对象思维实现动画 2.2.绘制路径 2.3.绘制圆弧(动态圆形 ...
html5怎么画坐标图,新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另外一个新元素是标签.须要使用JavaScript来操做和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它能够用于呈现图形.游戏图形或其余可视图像. 当一个更合适的 ...

canvas笔记-canvas中用户与图形交互

canvas笔记-canvas中用户与图形交互相关推荐

最新文章

热门文章