javascript - 使用不同颜色的标记在 上绘图 html2canvas.js

Question

我已经摆弄这段代码几个小时了，一直在兜圈子，想请教一些指点。

下面的代码让我可以在带有 bgd 图像的 Canvas 上放置尽可能多的红点，现在我想要做的是拥有此布局，但在 Canvas 顶部有链接，如下所示:

Link1->绿点Link2->黄点

显然，当我单击每个按钮时，我可以将黄色/绿色点与红点一起放置在 Canvas 上。

我目前正在使用 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';
}

然后最后将 drawCooperatives 函数中的 ctx.fillStyle 更改为:

ctx.fillStyle = "#ff2626";

至:

ctx.fillStyle = defaultColor;

<小时/>

这是一个包含上述代码的jsFiddle:https://jsfiddle.net/AndrewL64/mob5r6cs/1/