Question

我已经花了几小时的时间来摆弄这段代码，然后绕圈转，想请教一些指针。

下面的代码使我可以在具有bgd图像的画布上放置尽可能多的红点，现在我想要做的就是具有这种布局，但是在画布顶部具有链接，如下所示：

链接1->绿点 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/

使用不同的彩色标记html2canvas.js在<canvas>上绘图

1 个答案: