HTML5-跟踪画布上的圆圈数

HTML5 - track number of circles on canvas

本文关键字：跟踪 HTML5-      更新时间：2023-09-26

有没有一种方法可以统计画布上绘制的形状的数量我正在用画笔在画布上画一系列圆圈，并想找到一种方法来计算的数量

var mainCanvas = document.getElementById('draw1');
mainContext = mainCanvas.getContext('2d');
var CircleBrush = {
iPrevX: 0,
iPrevY: 0,
// initialization function
init: function () {
    mainContext.globalCompositeOperation = 'source-over';
    mainContext.lineWidth = 1;
    mainContext.strokeStyle = '#4679BD';
    mainContext.lineWidth = 1;
    mainContext.lineJoin = 'round';
},
startCurve: function (x, y) {
    this.iPrevX = x;
    this.iPrevY = y;
    mainContext.fillStyle = '#4679BD';
},
draw: function (x, y) {
    var iXAbs = Math.abs(x - this.iPrevX);
    var iYAbs = Math.abs(y - this.iPrevY);
    var rad = 6;
    if (iXAbs > 10 || iYAbs > 10) {
        mainContext.beginPath();
        mainContext.arc(this.iPrevX, this.iPrevY, rad, Math.PI * 2, false);
        mainContext.fill();
        mainContext.stroke();
        this.iPrevX = x;
        this.iPrevY = y;
       }
    }
};
var circleCounter = [0];
mainContext.font = '21pt Arial';
mainContext.fillStyle = '#262732';
mainContext.textBaseline = 'top';
mainContext.fillText(circleCounter, 20, 20);
CircleBrush.init();
$('#draw1').mousedown(function (e) { // mouse down handler
cMoeDo = true;
var canvasOffset = $('#draw1').offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
CircleBrush.startCurve(canvasX, canvasY);
circleCounter ++1;
 });
$('#draw1').mouseup(function (e) { // mouse up handler
 cMoeDo = false;
});
 $('#draw1').mousemove(function (e) { // mouse move handler
  if (cMoeDo) {
    var canvasOffset = $('#draw1').offset();
    var canvasX = Math.floor(e.pageX - canvasOffset.left);
    var canvasY = Math.floor(e.pageY - canvasOffset.top);
    CircleBrush.draw(canvasX, canvasY);
    circleCounter ++1;
 }
})

演示小提琴http://jsfiddle.net/A2vyY/

提前感谢

您需要清除计数器的空间并重新绘制计数。为了做到这一点，我把计数器和文本绘图放在绘图功能中，就像一样

draw: function (x, y) {        
    var iXAbs = Math.abs(x - this.iPrevX);
    var iYAbs = Math.abs(y - this.iPrevY);
    var rad = 6;  
    if (iXAbs > 10 || iYAbs > 10) {
        mainContext.beginPath();
        mainContext.arc(this.iPrevX, this.iPrevY, rad, Math.PI*2, false);
        mainContext.fill();
        mainContext.stroke();
        this.iPrevX = x;
        this.iPrevY = y;
        circleCounter ++;
        mainContext.clearRect(0,0,50,25);
        mainContext.fillText(circleCounter, 5, 5);           
    }
}

更新了jsFiddle（我移动了一些计数器，以便有更多的空间放置点）

您可以将计数器放在单独的div中，只需更新文本

<div id="content">
    <div id="counter">0</div>
    <canvas id="draw1" height="500" width="500"></canvas>
</div>

绘制圆时返回true，如果不是则返回false

draw: function (x, y) {
    /* ... */
    if (iXAbs > 10 || iYAbs > 10) {
        /* ... */
        return true;
    }
    return false;
}

增加并显示必要的

if (CircleBrush.draw(canvasX, canvasY)) {
    ++circleCounter;
    $('#counter').text(circleCounter);
}

参见修改后的JSFiddle

相关文章：