关于canvas本人用的不多，还不是很熟悉，只能处置惩罚一些简朴的运用，后面会继续进修。别的关于canvas事宜，假如你要完成一切图形都有本身的事宜，能够偿试遍历绘制，下面演示一下canvas事宜。

结果：

HTML规划

<style>
* {
    margin: 0;
    padding: 0;
}
</style>

<canvas id="canvas" width="400" height="400"></canvas>

JS代码：

主如果把绘制图形地区的坐标点保留起来，然后运用isPointInPath(x, y)来推断点击的坐标点是不是在保留的坐标点范围内

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 矩形背景
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// ========[ 测试一 ]========= //

// 绘制圆
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();

// 圆内坐标点
var circlePoints = {}; // 这里最好不要用数组，不然mousemove时会暴走的，能够设想一下，每一次挪动都要遍历那么大的数组，机能根不上
for(var i=0; i<canvas.width; i++) {
    for(var j=0; j<canvas.height; j++) {
        if(ctx.isPointInPath(i, j)) {
            circlePoints['x'+i] = i;
            circlePoints['y'+j] = j;
        }
    }
}

// 圆浮动事宜
canvas.addEventListener('mousemove', function(e) {
    if(circlePoints['x'+e.clientX] && circlePoints['y'+e.clientY]) {
        // 删除圆
        ctx.clearRect(50,50,100,100);
        ctx.fillStyle = 'gray';
        ctx.fillRect(50,50,100,100);
        // 绘制圆
        ctx.beginPath();
        ctx.arc(100,100,50,0,2*Math.PI);
        ctx.fillStyle = 'green';
        ctx.fill();
    } else {
        // 删除圆
        ctx.clearRect(50,50,100,100);
        ctx.fillStyle = 'gray';
        ctx.fillRect(50,50,100,100);
        // 绘制圆
        ctx.beginPath();
        ctx.arc(100,100,50,0,2*Math.PI);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
    }
});

// 圆点击事宜
canvas.addEventListener('click', function(e) {
    if(circlePoints['x'+e.clientX] && circlePoints['y'+e.clientY]) {
        var txt = 'Hello World !';
        var gradient = ctx.createLinearGradient(200, 100, ctx.measureText(txt).width+200, 124);
        gradient.addColorStop("0","orange");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        ctx.font = "24px Arial";
        ctx.fillStyle = gradient;
        ctx.fillText(txt, 200, 100);
    }
});

// ========[ 测试二 ]========= //

// 绘制矩形
ctx.beginPath();
ctx.fillStyle = 'orange';
ctx.rect(50, 200, 200, 100);
ctx.fill();
ctx.closePath();

// 保留矩形内坐标
var rectPoints = {};
for(var i=0; i<canvas.width; i++) {
    for(var j=0; j<canvas.height; j++) {
        if(ctx.isPointInPath(i, j)) {
            rectPoints['x'+i] = i;
            rectPoints['y'+j] = j;
        }
    }
}

// 矩形点击
canvas.addEventListener('click', function(e) {
    if(rectPoints['x'+e.clientX] && rectPoints['y'+e.clientY]) {
        var translateX = 50;
        (function translateAnimate() {
            ctx.clearRect(translateX, 200, 200, 100);
            ctx.fillStyle = 'gray';
            ctx.fillRect(translateX, 200, 200, 100);
            translateX++;

            ctx.beginPath();
            ctx.fillStyle = 'orange';
            ctx.rect(translateX, 200, 200, 100);
            ctx.fill();
            ctx.closePath();
            if(translateX < 190) requestAnimationFrame(translateAnimate);
        })();
    }
});

</script>

多谢关注，，阿弥陀佛。。