canvas笔记-canvas中用户与图形交互
生活随笔
收集整理的這篇文章主要介紹了
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中用户与图形交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt笔记-Linux程序打印带颜色的字符
- 下一篇： Arduino笔记-解决上传时出现avr