canvas的交互(一)

Bertha 。 2021-09-11 08:14 708阅读 0赞

首先我们先了解下几个知识点：

1..在canvas中添加事件，可以如下

canvas.addEventListener("mousemove",detect);//mousemove鼠标移上去，detect是事件方法

2.获取鼠标点击在canvas中的坐标（x,y）

function detect(event)\{  
        var x=event.clientX-canvas.getBoundingClientRect().left;  
        var y=event.clientY-canvas.getBoundingClientRect().top;

[getBoundingClientRect()方法解释][getBoundingClientRect]

3.判断鼠标点击的点位置是否在canvas画布中：采用isPointInPath()

如果指定的点位于当前路径中，返回 true；否则返回 false。

if(ctx.isPointInPath(x,y))\{

return true;

\}else\{

return false;

现在我们来做一个简单的列子：鼠标移上时，小球的颜色改变

![20170228105715200][]

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> <script> var balls = []; var canvas = document.getElementById("canvas"); var ctx=canvas.getContext('2d'); window.onload = function(){ canvas.width = 1200; canvas.height = 800; for(var i=0;i<10;i++){ var radius=Math.random()*50+20; aBall={ radius:radius, x:Math.random()*(canvas.width-2*radius)+radius, y:Math.random()*(canvas.height-2*radius)+radius, } balls[i]=aBall; } canvas.addEventListener("mousemove",detect);//canvas添加事件 } function draw(x,y){ ctx.clearRect(0,0,canvas.width,canvas.height); for( var i = 0 ; i < balls.length ; i ++ ){ ctx.beginPath(); ctx.arc(balls[i].x,balls[i].y,balls[i].radius,0,2*Math.PI); if(ctx.isPointInPath(x,y)){//isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。 ctx.fillStyle="red"; }else{ ctx.fillStyle="#058"; } ctx.fill(); } } function detect(event){ //鼠标点击canvas，获取的鼠标点击的位置(x,y) var x=event.clientX-canvas.getBoundingClientRect().left; var y=event.clientY-canvas.getBoundingClientRect().top; draw(x,y); } </script> </body> </html>

[getBoundingClientRect]: http://jingyan.baidu.com/article/8cdccae960b041315413cdcd.html
[20170228105715200]: /images/20210813/eee8931a5de1461fb60eb22e0d300018.png