使用javascript html5在画布上绘制点(圆)

<canvas>标签用于通过Javascript动态绘制图形。标签只是图形的容器, 必须使用脚本来实际绘制图形。在本文中, 你将学习如何根据用户单击的点在画布上绘制一个点。

首先, 在文档中创建所需大小的画布标签。

<!-- The canvas tag -->
<canvas id="canvas" width="690" height="651"></canvas>

要在用户单击画布时在其上绘制点, 我们需要检索click事件并获取该单击的坐标。要获取相对于HTML5 Canvas的鼠标坐标, 我们可以创建一个getPosition()方法, 该方法返回鼠标坐标(x, y)基于客户端鼠标的位置和从窗口对象的getBoundingClientRect()方法获得的画布的位置。

// 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.
}

以下信息显示了上述所有方法的一个已经有效的示例。转到结果选项卡, 看看它是如何工作的, 在母鸡上画很多点！

该代码对所有分辨率都很友好, 因为它保持最简单。即使你放大文档, 也会正确绘制坐标。玩得开心！