canvas添加局部事件

最新推荐文章于 2024-06-05 14:45:33 发布

qq_36587340

最新推荐文章于 2024-06-05 14:45:33 发布

阅读量274

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_36587340/article/details/132608229

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>给canvas矩阵添加事件</title>
    <style>
    canvas {
        border: 1px solid;
    }
    </style>
</head>

<body>
    <canvas id="canvas" width=500 height=500></canvas>
    <button onclick="clears();">清除</button>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 100,
    y = 100,
    w = 100,
    h = 100;

run("red");
ctx.fillStyle = '#ADF';
ctx.fillRect(200, 200, w, h);
ctx.beginPath();
// 生成矩阵
function run(color) {
    // clears();
    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);
}
// 清除画布
function clears() {
    ctx.beginPath();
    ctx.clearRect(0, 0, 500, 500);
    ctx.closePath();
}
// 监听画布
canvas.addEventListener("click", function(e) {
    // 鼠标x轴 >= 矩阵x轴 && 鼠标x轴 <= 矩阵x轴 + 矩阵宽度
    // 鼠标y轴 >= 矩阵y轴 && 鼠标y轴 <= 矩阵y轴 + 矩阵高度
    if (e.layerX >= x && e.layerX <= x + w && e.layerY >= y && e.layerY <= y + h) {
        run("black");
    } else if (e.layerX >= 200 && e.layerX <= 200 + 100 && e.layerY >= 200 && e.layerY <= 200 + 100) {
        ctx.fillStyle = 'red';
        ctx.fillRect(200, 200, w, h);
        ctx.beginPath();
    } else {
        run("red");
        ctx.fillStyle = '#adf';
        ctx.fillRect(200, 200, w, h);
        ctx.beginPath();
    }
});
</script>

</html>