如何多次引用我的html5畫布繪圖？

Question

我已經使用畫布創建了一個圖形，打算將其多次用於各種導航鏈接，但是我的問題是，當我多次引用它時，它只會顯示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>

Answer 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"));