Question

我想绘制用户在画布上点击的所有点，直到用户点击第一次点击为止。我可以将它们存储在隐藏的输入中，但是我无法让它们在屏幕上正确地绘制/显示（＆＃34; ctx.fillRect（pos_x，pos_y，1,1）;＆＃34;）。我的代码丢失了什么？我只看到第一个点，它甚至不在我点击的地方（使用IE Edge查看）。最后我想添加点所绘制的线条。

此外，作为一个额外的，有人可以帮我确定点击是否在画布内，代码检测上下文菜单的时间？

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var c;
        var ctx;

        function wireUp()
        {
            // Initiate context. Do only once
            c = document.getElementById('imgContainer');
            ctx = c.getContext('2d');

            // Store points
            keepPoints('hiddenMap');

            // Override context when user has clicked within the canvas
            window.oncontextmenu = function ()
            {
                // TO DO: Detect click was within canvas area
                clearMap('imgContainer', 'hiddenMap');
                return false; // cancel default menu
            }

            document.getElementById('imgContainer').onclick = function (e) {
                // Detect RMB. See: http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event
                var isRightMB;
                e = e || window.event;

                if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
                    isRightMB = e.which == 3; 
                else if ("button" in e)  // IE, Opera 
                    isRightMB = e.button == 2;

                if(!isRightMB)
                {
                    pointDetected('imgContainer', 'hiddenMap', e);
                }
                else
                { // Clear points, drawn and on map
                    alert("RMB");
                    clearMap('imgContainer', 'hiddenMap');
                }
            };
        }
        function clearMap(container, map)
        {
            // Clear drawn points
            var canvas = document.getElementById(container);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Clear map
            var hMap = document.getElementById(map);
            hMap.value = "";
        }
        function pointDetected(container, map, event)
        {
            //alert("Oh my! " + container);
            pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(container).offsetLeft;
            pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(container).offsetTop;
            //alert(pos_x + ", " + pos_y);

            var hMap = document.getElementById(map);
            if(hMap.value) // Check if the map has already points and append with comma
            {
                hMap.value = hMap.value + "; " + pos_x + ", " + pos_y;
            }
            else
            {
                hMap.value = pos_x + ", " + pos_y;
            }
            alert(hMap.value);

            // Draw a point where clicked
            ctx.fillRect(pos_x, pos_y, 1, 1);
        }
        function keepPoints(container)
        {
            // Stores all the points that the user has selected
            var hidden = document.createElement("input");
            var typeAtt = document.createAttribute("type");
            typeAtt.value = "hidden";
            hidden.setAttributeNode(typeAtt);
            hidden.id = container;
            document.body.appendChild(hidden);
        }
    </script>
</head>
<body onload="wireUp();">
    <canvas style="background:url('untitled.png');width:819px;height:460px;border-style:solid;" id="imgContainer">
    </canvas>
</body>

Answer 1

我更改了代码以使用ctx.moveTo和ctx.lineTo创建行。那和Kaiido的评论，帮助我让代码工作。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
            var c;
            var ctx;

        function wireUp()
        {
            // Initiate context. Do only once
            c = document.getElementById('imgContainer');
            ctx = c.getContext('2d');
            ctx.lineWidth = 5;
            ctx.strokeStyle = "#FF0000";

            // Store points
            keepPoints('hiddenMap');

            // Override context when user has clicked within the canvas
            window.oncontextmenu = function (e)
            {
                // TO DO: Detect click was within canvas area
                clearMap('imgContainer', 'hiddenMap');
                return false; // cancel default menu
            }

            document.getElementById('imgContainer').onclick = function (e) {
                // Detect RMB. See: http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event
                var isRightMB;
                e = e || window.event;

                if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
                    isRightMB = e.which == 3; 
                else if ("button" in e)  // IE, Opera 
                    isRightMB = e.button == 2;

                if(!isRightMB)
                {
                    pointDetected('imgContainer', 'hiddenMap', e);
                }
                else
                { // Clear points, drawn and on map
                    alert("RMB");
                    clearMap('imgContainer', 'hiddenMap');
                }
            };
        }
        function clearMap(container, map)
        {
            // Clear drawn points
            var canvas = document.getElementById(container);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Clear map
            var hMap = document.getElementById(map);
            hMap.value = "";
        }
        function pointDetected(container, map, event)
        {
            //alert("Oh my! " + container);
            pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(container).offsetLeft;
            pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(container).offsetTop;
            //alert(pos_x + ", " + pos_y);

            var hMap = document.getElementById(map);
            if(hMap.value) // Check if the map has already points and append with comma
            {
                hMap.value = hMap.value + ";" + pos_x + "," + pos_y;
        -       // Continue from last drawn point
                ctx.lineTo(pos_x, pos_y);
                ctx.stroke();
            }
            else
            {
                hMap.value = pos_x + "," + pos_y;
                // Draw a point where clicked
                ctx.beginPath();
                ctx.moveTo(pos_x, pos_y);
            }
            //alert(hMap.value);

            //ctx.fillRect(pos_x, pos_y, 1, 1);
        }
        function keepPoints(container)
        {
            // Stores all the points that the user has selected
            var hidden = document.createElement("input");
            var typeAtt = document.createAttribute("type");
            typeAtt.value = "hidden";
            hidden.setAttributeNode(typeAtt);
            hidden.id = container;
            document.body.appendChild(hidden);
        }
    </script>
</head>
<body onload="wireUp();">
    <canvas style="background:url('untitled.png');border-style:solid;" width="819" height="460" id="imgContainer">
    </canvas>
</body>

无法获得HTML5 2D上下文来绘制点

1 个答案: