Рисование <canvas>с использованием разноцветных маркеров html2canvas.js - PullRequest
Новая
       4

Рисование <canvas>с использованием разноцветных маркеров html2canvas.js

0 голосов
/ 01 декабря 2018

Я возился с этим битом кода для часов и теперь ходил кругами и хотел бы попросить несколько указателей, пожалуйста.

Код ниже позволяет мне разместить как можно больше красных точек нахолст с bgd-изображением, теперь я собираюсь использовать этот макет, но иметь ссылки вверху холста следующим образом:

Link1-> Green Dot Link2-> Yellow Dot

И, очевидно, когда я нажимаю на каждую из них, она позволяет мне размещать желтые / зеленые точки на холсте рядом с красными точками.

В настоящее время я использую 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();
}

1 Ответ

0 голосов
/ 01 декабря 2018

Просто добавьте кнопки (или ссылки) в ваш 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/

...