当前位置：文江博客话题详情

HTML Canvas MouseEvent line

在 HTML5 画布上点击两次鼠标画一条线？

发布于 2024-11-08 16:11:20 字数 26 浏览 2 评论 0原文

如何在画布上单击两次鼠标来绘制一条线？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

下壹個目標 2024-11-15 16:11:20

代码很简单，但是你必须有很好的基础：

演示：http: //jsfiddle.net/NpDdt/10/

JavaScript：

var clicks = 0;
var lastClick = [0, 0];

document.getElementById('canvas').addEventListener('click', drawLine, false);

function getCursorPosition(e) {
    var x;
    var y;

    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return [x, y];
}

function drawLine(e) {
    context = this.getContext('2d');

    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    if (clicks != 1) {
        clicks++;
    } else {
        context.beginPath();
        context.moveTo(lastClick[0], lastClick[1]);
        context.lineTo(x, y, 6);

        context.strokeStyle = '#000000';
        context.stroke();

        clicks = 0;
    }

    lastClick = [x, y];
};

The code is quite simple, but you have to get a good foundation:

Demo: http://jsfiddle.net/NpDdt/10/

JavaScript:

var clicks = 0;
var lastClick = [0, 0];

document.getElementById('canvas').addEventListener('click', drawLine, false);

function getCursorPosition(e) {
    var x;
    var y;

    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return [x, y];
}

function drawLine(e) {
    context = this.getContext('2d');

    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    if (clicks != 1) {
        clicks++;
    } else {
        context.beginPath();
        context.moveTo(lastClick[0], lastClick[1]);
        context.lineTo(x, y, 6);

        context.strokeStyle = '#000000';
        context.stroke();

        clicks = 0;
    }

    lastClick = [x, y];
};

回复收藏 0 原文

柠栀 2024-11-15 16:11:20

这是一个完整的示例，基于 http://www.w3schools 上的 W3Schools 示例.com/html5/tryit.asp?filename=tryhtml5_canvas_line

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script>

            $(function(){

                var point1 = new Array();
                point1['x'] = false;
                point1['y'] = false;
                var point2 = new Array();
                point2['x'] = false;
                point2['y'] = false;

                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");

                $(document).click(function(e){
                    if ( false === point1['x'] || false === point1['y']) {
                        point1['x'] = e.pageX;
                        point1['y'] = e.pageY;
                        return;
                    }
                    else if ( false === point2['x'] || false === point2['y'] ) {
                        point2['x'] = e.pageX;
                        point2['y'] = e.pageY;

                        console.log("second");

                        cxt.moveTo(point1['x'], point1['y']);
                        cxt.lineTo(point2['x'], point2['y']);
                        cxt.stroke();

                    }


                });
            });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="200" style="border: 1px solid #000">Your browser does not support the canvas element.</canvas>
    </body>
</html>

Here is a complete example, based on the W3Schools example at http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script>

            $(function(){

                var point1 = new Array();
                point1['x'] = false;
                point1['y'] = false;
                var point2 = new Array();
                point2['x'] = false;
                point2['y'] = false;

                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");

                $(document).click(function(e){
                    if ( false === point1['x'] || false === point1['y']) {
                        point1['x'] = e.pageX;
                        point1['y'] = e.pageY;
                        return;
                    }
                    else if ( false === point2['x'] || false === point2['y'] ) {
                        point2['x'] = e.pageX;
                        point2['y'] = e.pageY;

                        console.log("second");

                        cxt.moveTo(point1['x'], point1['y']);
                        cxt.lineTo(point2['x'], point2['y']);
                        cxt.stroke();

                    }


                });
            });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="200" style="border: 1px solid #000">Your browser does not support the canvas element.</canvas>
    </body>
</html>

回复收藏 0 原文

~没有更多了~

关于作者

碍人泪离人颜

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文