HTML5 - 畫布上圈數的圈數

有沒有一種方法可以保留畫布上繪製的形狀數量的計數我正在使用各種畫筆在畫布上繪製一串圓圈並希望找到一種方法來算多少都存在HTML5 - 畫布上圈數的圈數

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/

在此先感謝

來源

2013-12-12 Steven

正如你繪製每個圓圈，添加一個到數顯示。 – robertc

需要清除計數器的空間和重繪計數。爲了做到這一點，我把櫃檯和文字拉伸的拉伸功能，像這樣

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);   
    } 
}

Updated jsFiddle（我感動計數器一些，以便有針對的點更多的空間）

來源

2013-12-12 20:25:52

這是完美的 - 太多的咖啡沒有足夠的睡眠讓你的大腦陷入困境 – Steven

你可以把計數器在一個單獨的div，只是更新文本

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

返回真當畫圓，否則爲false

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

    return false; 
}

增量，並根據需要

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

瞭解改JSFiddle

來源

2013-12-12 20:31:11

謝謝你仔細觀察。 –

HTML5 - 畫布上圈數的圈數

回答

相關問題