循环绘制多个画布？

我有这样的命令，因为我想完美的作品：http://jsfiddle.net/m1erickson/64BHx/循环绘制多个画布？

，所以我不知道它会这么难，原来这里绘制：

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

那么什么我试图做的是以下：你们可以在此链接观看：http://jsfiddle.net/whm3n/

我创建5个帆布这将是上述drawingcanvas数
在数组的JavaScript他才得到所有的帆布一次
点击打算以显示这个类的内容后，一个警告有关（支持登录...）

我想问题在这里：

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; 

}

有人可以帮我吗？

来源

2014-01-27 user3177502

'变种帆布+ '_' + B = ...'=>'SyntaxError' – philipp

，以及如何我可以勾勒出这一点，做我的想法？ – user3177502

**是什么类型的变量！** **检查你的控制台：'未捕获的SyntaxError：意外的令牌+' –

另一种方法是画弧，并使用数学当鼠标在一个特定的弧线击中测试。

enter image description here

演示：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>

来源

2014-01-27 21:38:58 markE

是的男人，但如果我点击红色，我想看到一个戒备......我怎么做到这一点？例如：红色显示登录，蓝色显示退出... – user3177502

您还可以收听点击事件。点击弧线后，您可以显示警报消息，并将其保存在一系列警报消息中。这里有一个演示：http://jsfiddle.net/m1erickson/98Bgq/祝你的项目好运！ – markE

你是最棒的！我无法用语言形容你最好！：d – user3177502

如果你想使用动态变量名，我建议你使用数组表示法。试试这个：

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; 
}

而且这里是你的提琴：http://jsfiddle.net/whm3n/2/

它应该帮助你从这里继续。

来源

2014-01-27 20:08:51 Skwal

此评论之后Loop to draw many canvas?。

如果你想用链接制作一个菜单，不要用图形功能打扰你。使用你的图像是最快的。或者只使用一个画布，并画几圈。

我做这个（很少的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); 
}; 

// http://i.stack.imgur.com/Y5HcN.png I use base64 for get image because else console return security error with "getImageData". 
image.src = "data:image/png;base64,...";

对于“image.src”，用你的形象在你的域或使用其他的Base64此脚本返回安全错误图像转换为base64看到： http://www.base64-image.de/。原文：https://stackoverflow.com/a/20981857/2226755

使用该模板：http://i.stack.imgur.com/Y5HcN.png

来源

2014-01-27 21:10:51

循环绘制多个画布？

回答

相关问题