0

さまざまなナビゲーション リンクに複数回使用する予定のキャンバスを使用して図面を作成しました。私の問題は、それを複数回参照すると 1 しか表示されないことです。明らかに、各インスタンスのコードを複製できますが、計画していますこれをかなり頻繁に使用する場合、これは理想的ではありません。以下のコードとリンクされた jsfiddle を見てください。どうもありがとう。

http://jsfiddle.net/LTu2H/

//first reference
<canvas id="canvasId" width="50" height="50"></canvas>
//second reference 
<canvas id="canvasId" width="50" height="50"></canvas>

<script>
var context = document.getElementById("canvasId").getContext("2d");

var width = 125;  // Triangle Width
var height = 45; // Triangle Height
var padding = 5;

// Draw a path
context.beginPath();
context.moveTo(padding + width-125, height + padding);        // Top Corner
context.lineTo(padding + width-90,height-17 + padding); // point
context.lineTo(padding, height-35 + padding);         // Bottom Left
context.closePath();

// Fill the path
context.fillStyle = "#9ea7b8";
context.fill();
</script>
4

1 に答える 1

1

一意の ID しか持てない

HTML:

<canvas id="canvasId" width="50" height="50"></canvas>
<canvas id="canvasId2" width="50" height="50"></canvas>

JS:

function drawSomething(canvas) {
    var context = canvas.getContext("2d");

    var width = 125;  // Triangle Width
    var height = 45; // Triangle Height
    var padding = 5;

    // Draw a path
    context.beginPath();
    context.moveTo(padding + width-125, height + padding);        // Top Corner
    context.lineTo(padding + width-90,height-17 + padding); // point
    context.lineTo(padding, height-35 + padding);         // Bottom Left
    context.closePath();

    // Fill the path
    context.fillStyle = "#9ea7b8";
    context.fill();

}

drawSomething(document.getElementById("canvasId"));
drawSomething(document.getElementById("canvasId2"));
于 2012-06-04T13:47:34.933 に答える