Home > Q&A > body text

javascript - 学习canvas中，使用oncmousedown事件的程序在firefox下无法实现预期效果哪里出了问题？

预期效果是实现鼠标点击是画一个三角形。，chrome可以运行。
代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CANVAS测试代码</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script type="text/javascript" charset="utf-8">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        canvas.onmousedown=function (event) {
        var x=event.x;
        var y=event.y;
        var r= Math.random()*10+5;

        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x, y+r);
        ctx.lineTo(x+r, y+r);
        ctx.lineTo(x, y);
        ctx.strokeStyle = "red";
        ctx.stroke();
        };
    </script>
</body>
</html>

PHP中文网2897 days ago347

reply all(1)I'll reply

大家讲道理2017-04-10 15:16:12

firefox有event.clientX, event.pageX, event.layerX等鼠标相关坐标的属性，就是没有event.x

reply

Cancelreply