如何多次引用我的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"));