不能让HTML5 2D上下文画一个点

Can't get HTML5 2D context to draw a point

本文关键字：一个 HTML5 2D 上下文 不能      更新时间：2023-09-26

我想绘制用户在画布上单击的所有点，直到用户单击第一次单击的点。我能够将它们存储在隐藏的输入中，但我无法让它们绘制/显示("ctx")。fillRect(pos_x, pos_y, 1,1);")我的代码缺少什么?我只看到第一个点，它甚至不在我点击的地方(使用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>

我更改了代码，使用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>

相关文章：