마우스로 그릴 수있는 HTML5 Canvas가 있습니다. 사용자가 새로운 그림을 만들 수 있도록 캔버스를 지울 수 있기를 원합니다. 나는 이것을 다음과 같이한다 :myContext.clearRect (0, 0, 500, 700); Canvas를 올바르게 지우지 못함
캔버스는 분명해 보이지만 사용자가 새로운 그림을 시작하자마자 오래된 그림이 다시 나타난다. 마우스 드로잉 부분에 대한 내 자바 스크립트는 다음과 같습니다
// Variables
var x1;
var y1;
var isPressed = false;
var myCanvas;
var myContext;
function startCanvas() {
// Canvas stuff
myCanvas = document.getElementById("can1");
myContext = myCanvas.getContext("2d");
// Specify a black background, and white lines that are 3 pixels thick.
myContext.fillStyle = '#000000';
myContext.strokeStyle = '#000000';
myContext.fillRect(0, 0, 500, 700);
myContext.lineWidth = 3;
myContext.fill();
}
function functionMouseDown(e) {
// Get coordinates
x1 = e.clientX - myCanvas.offsetLeft;
y1 = e.clientY - myCanvas.offsetTop;
isPressed = true;
}
function functionMouseMove(e) {
// If mouse is down and moved start drawing line
if (isPressed == true) {
drawLine(e);
}
}
function functionMouseUp() {
// Stop drawing line
isPressed = false;
}
function drawLine(e) {
// Draw line
var x = e.clientX - myCanvas.offsetLeft;
var y = e.clientY - myCanvas.offsetTop;
myContext.strokeStyle = '#ffffff';
myContext.lineWidth = 1;
myContext.moveTo(x1, y1);
myContext.lineTo(x, y);
myContext.stroke();
// Set start coordinates to current coordinates
x1 = x;
y1 = y;
}
startCanvas();
HTML은 다음과 같습니다
<canvas id="can1" width="500" height="700"></canvas>
당신이 [바이올린]를 제공 할 수 있습니다 (http://jsfiddle.net)? –