循環繪製多個畫布？

我有這樣的命令，因爲我想完美的作品：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

循環繪製多個畫布？

回答

相關問題