1

大家好，我在 html 5 中的图表构造有问题。这次除了一个部分或模块外，一切都做得很好。我尝试了一些通过互联网获得的代码，用于在单击画布中的矩形时显示一些警报。当我评论模块时，它工作正常，但不是鼠标点击。谁能帮我吗。提前致谢。这是我的小提琴和代码 [fiddle]：http: //jsfiddle.net/s8kZs/

<!doctype html>
    <html>
        <head>
            <script type="text/javascript">
            window.onload=function() {
                var canvas=document.getElementById('mycanvas');
                var ctx=canvas.getContext('2d');
                var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}];
                var width=45;
                 function renderGrid(gridPixelSize, color)
        {
            ctx.save();
            ctx.lineWidth = 0.5;
            ctx.strokeStyle = color;
            for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize)
            {
                ctx.beginPath();
                ctx.moveTo(20, i);
                ctx.lineTo(canvas.width-20, i);
                ctx.closePath();
                ctx.stroke();
            }
            for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize)
            {
                ctx.beginPath();
                ctx.moveTo(j, 20);
                ctx.lineTo(j, canvas.height-20);
                ctx.closePath();
                ctx.stroke();
            }
            ctx.restore();
        }
       renderGrid(10, "grey");

                ctx.beginPath();
                ctx.strokeStyle = 'black';
                ctx.moveTo(20, canvas.height-20);
                ctx.lineTo(canvas.width-20, canvas.height-20);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
        ctx.strokeStyle = 'black';
                ctx.moveTo(20, 20);
                ctx.lineTo(20, canvas.height-20);
                ctx.closePath();
                ctx.stroke();
                ctx.font = "bold 16px Arial";

        function getFunctionForTimeout(j){
                    var i=0,currx=30,info=graphInfo[j],x5=j*5;
                    var fTimeout=function(){
                        var h=Math.max(info.data[i]-x5,0);
                        var m=info.label[i];
                        ctx.fillStyle='black'
                        ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1);
                        ctx.fillStyle=info.color;                   
                        ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);                 
                        ctx.fillText(m, currx+(10*x5)+20, canvas.height-5);
                        currx+=120;  
                        i++;
                        /*var ctx = $('#mycanvas').get(0).getContext('2d');
                        $('#mycanvas').click(function(e) {
        var x = e.offsetX,
            y = e.offsetY;

        for(var k=0;k<j;k++) {
            if(x > currx+(10*x5)
            && x < canvas.height-h-21
            && y > width
            && y < h) {
                alert('Rectangle ' + j + ' clicked');
            }
        }
    });*/
                        if(i<info.data.length)setTimeout(fTimeout,2000);
                    };
                    return fTimeout;
        }

                for(var j=graphInfo.length-1;j>=0;j--) {
                    setTimeout(getFunctionForTimeout(j),2000);
                }
            };
            </script>
        </head>
        <body>
            <canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
        </body>
    </html>
4

1 回答 1

0

这是为您提供在画布上单击的鼠标位置的代码，我只是更改了您的代码以针对您期望的警报进行更正，但是您的状况存在一些问题，您将其生成为警报。

Njoy点击并提醒鼠标位置；如果您想要您期望的相同警报，请更改您的 if 条件，您将通过我的位置警报获得它...

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
        window.onload=function() {
            var canvas=document.getElementById('mycanvas');
            var ctx=canvas.getContext('2d');
            var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}];
            var width=45;
            function renderGrid(gridPixelSize, color)
            {
                ctx.save();
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = color;
                for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize)
                {
                    ctx.beginPath();
                    ctx.moveTo(20, i);
                    ctx.lineTo(canvas.width-20, i);
                    ctx.closePath();
                    ctx.stroke();
                }
                for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize)
                {
                    ctx.beginPath();
                    ctx.moveTo(j, 20);
                    ctx.lineTo(j, canvas.height-20);
                    ctx.closePath();
                    ctx.stroke();
                }
                ctx.restore();
            }
               renderGrid(10, "grey");

                        ctx.beginPath();
                        ctx.strokeStyle = 'black';
                        ctx.moveTo(20, canvas.height-20);
                        ctx.lineTo(canvas.width-20, canvas.height-20);
                        ctx.closePath();
                        ctx.stroke();

                        ctx.beginPath();
                ctx.strokeStyle = 'black';
                        ctx.moveTo(20, 20);
                        ctx.lineTo(20, canvas.height-20);
                        ctx.closePath();
                        ctx.stroke();
                        ctx.font = "bold 16px Arial";

            function getFunctionForTimeout(j){
                var i=0,currx=30,info=graphInfo[j],x5=j*5;
                var fTimeout=function(){
                    var h=Math.max(info.data[i]-x5,0);
                    var m=info.label[i];
                    var ctx = $('#mycanvas').get(0).getContext('2d');
                    ctx.fillStyle='black'
                    ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1);
                    ctx.fillStyle=info.color;                    
                    ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);                    
                    ctx.fillText(m, currx+(10*x5)+20, canvas.height-5);
                    currx+=120;  
                    i++;

                    $('#mycanvas').click(function(e) {
                        var canvas = document.getElementById("myCanvas");
                        var mousePos = getMousePos(canvas, e);
                        var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
                        var x = mousePos.x;
                        var y = mousePos.y;
                        alert(message);

                        for(var k=0;k<j;k++) {
                            if(x > currx+(10*x5)
                            && x < canvas.height-h-21
                            && y > width
                            && y < h) {
                                alert('Rectangle ' + j + ' clicked');
                            }
                        }
                    });
                    if(i<info.data.length)setTimeout(fTimeout,2000);
                };
                return fTimeout;
            }       

            for(var j=graphInfo.length-1;j>=0;j--) {
                setTimeout(getFunctionForTimeout(j),2000);
            }
            function getMousePos(canvas, evt) {
                var rect = canvas.getBoundingClientRect(), root = document.documentElement;

            // return relative mouse position
            var mouseX = evt.clientX - rect.top - root.scrollTop;
            var mouseY = evt.clientY - rect.left - root.scrollLeft;
                return {
                  x: mouseX,
                  y: mouseY
                };
              }
        };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
    </body>
</html>

只需检查 getMousePos() 中的更改是否与您需要的相同

干杯！！！开心！！！

于 2012-07-25T10:51:06.930 回答