CODEWITHSUNDEEP
javascriptjqueryhtmlcanvashtml5-canvas
user3177502
user3177502

Reputation: 83

Loop to draw many canvas?

I have this command that works perfectly as I wanted: http://jsfiddle.net/m1erickson/64BHx/

so I did not know it would be so hard that it turns drawing here:

http://www.afriquinfos.com/fotografias/fotosnoticias/2012/2/10/int-26146.jpg

Well what I tried to do is the following: you guys can watch at this link: http://jsfiddle.net/whm3n/

I think the problem is here:

  for(b=0;b<6;b++){

var canvas + '_' + b = document.getElementById("canvas");
var context + '_' + b  = canvas.getContext("2d");
var $canvas + '_' + b  = $("#canvas");
var canvasOffset + '_' + b  = $canvas + '_' + b.offset();
var offsetX + '_' + b  = canvasOffset + '_' + b.left;
var offsetY + '_' + b  = canvasOffset + '_' + b.top;

}

Someone can help me?

Upvotes: 1

Views: 319

Answers (3)

markE
markE

Reputation: 105015

An alternative is to draw the arcs and use math to hit-test when the mouse is on a particular arc.

enter image description hereenter image description here

Demo: http://jsfiddle.net/m1erickson/42VC2/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // variables to calculate mouse position
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // define our arcs
    var colors=["red","green","blue","purple","gold"];
    var arcCount=colors.length;
    var arcAngle=Math.PI*2/arcCount;
    var cx=150;
    var cy=150;
    var radius=75;
    var lineWidth=25;

    // set the context properties
    ctx.lineWidth=lineWidth;
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;

    // initially draw the arcs without a highlight
    draw(-1);


    // draw all arcs with shadowIndex hightlighted
    function draw(shadowIndex){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<arcCount;i++){
            ctx.shadowColor = (i==shadowIndex) ? '#7FD4FF' : "#FFFFFF";
            ctx.beginPath();
            ctx.arc(cx,cy,radius,arcAngle*i,arcAngle*(i+1));
            ctx.strokeStyle=colors[i];
            ctx.stroke();
        }
    }


    // highlight any arc that the mouse moves over
    function handleMouseMove(e){
        e.preventDefault();
        // get the mouse position
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        // calc the deltaX/deltaY of mouse to centerpoint
        // (needed for our distance and angle calculations)
        var dx=mouseX-cx;
        var dy=mouseY-cy;
        // calc the distance from mouse to centerpoint
        var mouseDistance=Math.sqrt(dx*dx+dy*dy);
        // leave if the mouse is not between
        // the inside and outside of the stroke
        if(mouseDistance<radius-lineWidth/2 || mouseDistance>radius+lineWidth/2){return;};
        // calc the angle of the mouse vs centerpoint
        var mouseAngle=(Math.atan2(dy,dx)+Math.PI*2)%(Math.PI*2);
        // determine which arc that angle is inside
        var shadowArc=parseInt(mouseAngle/arcAngle);
        // redraw all arcs with shadowArc shadowed
        draw(shadowArc);
    }

    // listen for mousemove events on the canvas
    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <h4>Move the mouse to highlight an arc</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 1

user2226755
user2226755

Reputation: 13159

After this comment Loop to draw many canvas?.

Don't bothers you with graphical function, if you want make a menu with link. Use your image is fastest. Or use only one canvas, and draw several circles.

I make this (with little jquery) : http://jsbin.com/iYuYADi/1/edit

var $cog = $('#cog'),
    $body = $(document.body);

$cog.click(function(e) {
    var x = e.pageX, y = e.pageY;    
    console.log(x, y);

    var color = context.getImageData(x, y, 1, 1).data;
    // context.fillRect(x-5, y-5, 1+10, 1+10); <== See cursor position
    console.log(color);
    if (color[0] == 255 && color[1] == 255 && color[2] == 0) {
        alert("yellow");
    } else if (color[0] == 0 && color[1] == 255 && color[2] == 0) {
        alert("green");
    } else if (color[0] == 0 && color[1] == 0 && color[2] == 0) {
        alert("black");
    } else if (color[0] == 255 && color[1] == 0 && color[2] == 0) {
        alert("red");
    } else if (color[0] == 0 && color[1] == 0 && color[2] == 255) {
        alert("blue");
    }
});

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    image = new Image();
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0, image.width, image.height);
};

// https://i.sstatic.net/Y5HcN.png I use base64 for get image because else console return security error with "getImageData".
image.src = "data:image/png;base64,...";

For "image.src", use your image in YOUR DOMAIN or use Base64 else this script return security error for convert image to base64 see : http://www.base64-image.de/. Original : https://stackoverflow.com/a/20981857/2226755

Use this template : https://i.sstatic.net/Y5HcN.png

Upvotes: 1

Skwal
Skwal

Reputation: 2160

If you want to use dynamic variable names, I suggest you use the array notation. Try this:

var canvas = [],
    context = [],
    $canvas = [],
    canvasOffset = [],
    offsetX = [],
    offsetY = [];

for ( b = 0; b < 6; b++ ) {
    canvas[b] = document.getElementById("canvas_" + b),
    context[b]  = canvas[b].getContext("2d"),
    $canvas[b]  = $("#canvas_" + b),
    canvasOffset[b]  = $canvas[b].offset(),
    offsetX[b]  = canvasOffset[b].left,
    offsetY[b]  = canvasOffset[b].top;
}

And here's your fiddle : http://jsfiddle.net/whm3n/2/

It should help you continue from here.

Upvotes: 2

Related Questions