Этот тег используется для рисования графики на лету через Javascript. Тег является только контейнером для графики, вы должны использовать скрипт для фактического рисования графики. В этой статье вы узнаете, как нарисовать на холсте точку в соответствии с выбранной пользователем точкой.
Для начала создайте в документе тег холста нужного размера.
Чтобы нарисовать точки на холсте, когда пользователь нажимает на него, нам нужно извлечь событие click и получить координаты этого клика. Чтобы получить координаты мыши относительно холста HTML5, мы можем создать метод getPosition (), который возвращает координаты мыши (x, y) на основе положения клиентской мыши и положения холста, полученного из метода getBoundingClientRect () объекта window.
// Event will be a click event which can be retrieved as first parameter in the addEventListener(function(event){}); or in jQuery with $("selector").click(function(event){});
function getPosition(event){
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left; // x == the location of the click in the document - the location (relative to the left) of the canvas in the document
var y = event.clientY - rect.top; // y == the location of the click in the document - the location (relative to the top) of the canvas in the document
// This method will handle the coordinates and will draw them in the canvas.
drawCoordinates(x,y);
}Теперь наш метод drawCoordinates нарисует точку в соответствии с местоположением щелчка на холсте. В качестве первого параметра он получает координату x (горизонтальную) холста, а в качестве второго параметра — координату y (вертикальную) относительно холста.
function drawCoordinates(x,y){
var pointSize = 3; // Change according to the size of the point.
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "#ff2626"; // Red color
ctx.beginPath(); //Start path
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill(); // Close the path and fill.
}
Следующая таблица показывает уже работающий пример всех вышеперечисленных методов. Перейдите на вкладку «Результат» и посмотрите, как это работает, нарисуйте много точек на курице!
Этот код удобен для всех разрешений, так как он максимально прост. Даже если вы увеличите масштаб документа, координаты будут нарисованы правильно. Повеселись !
