繪圖 <canvas> 使用不同的彩色標記html2canvas.js

Question

我已經花了幾小時的時間來擺弄這段代碼，然后繞圈轉，想請教一些指針。

下面的代碼使我可以在具有bgd圖像的畫布上放置盡可能多的紅點，現在我要做的是具有此布局，但在畫布頂部具有鏈接，如下所示：

Link1->綠點Link2->黃點

顯然，當我單擊每個按鈕時，它將允許我在畫布上將黃/綠點與紅點並排放置。

我目前正在使用html2canvas.js

再次感謝

    $("#canvas").click(function(e){
     getPosition(e); 
});
var pointSize = 7;
function getPosition(event){
     var rect = canvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;

     drawCoordinates(x,y);
}
function drawCoordinates(x,y){  
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillStyle = "#ff2626"; // Red color
    ctx.beginPath();
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
    ctx.fill();
}

Answer 1

只需將按鈕（或鏈接）添加到HTML即可，如下所示：

<button id="red">
    Red Dot
</button>
<button id="green">
    Green Dot
</button>
<button id="yellow">
    Yellow Dot
</button>

然后將以下內容添加到您的JavaScript中：

var defaultColor ="#ff2626"; // default color 'red' on page load

var a = document.getElementById('green');
var b = document.getElementById('yellow');
var c = document.getElementById('red');

a.addEventListener('click', greenDot);
b.addEventListener('click', yellowDot);
c.addEventListener('click', redDot);

function greenDot(){
    defaultColor = '#116311';
}
function yellowDot(){
    defaultColor = '#d3de24';
}
function redDot(){
    defaultColor = '#ff2626';
}

然后終於改變ctx.fillStyle在drawCoordinates從功能：

ctx.fillStyle = "#ff2626";

至：

ctx.fillStyle = defaultColor;

---

這是帶有上面代碼的jsFiddle ： https : //jsfiddle.net/AndrewL64/mob5r6cs/1/