Canvas用戶交互-鼠標選中小球變色

時間 2019-11-08

標籤 canvas 用戶交互鼠標選中小球變色简体版

原文原文鏈接

<!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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。