我真的不确定这个有什么问题，所以我将在底部发布所有代码。
我开始尝试制作一个简单的动画程序like this ，但每当我尝试绘制一个框架时，它就会填充整个 Canvas 。
这是代码
在测试该功能之前，您可能也应该清除电路板。
<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
</head>
<body>
<canvas id="container" width="500" height="500" style="border: 3px solid black"></canvas><br>
<button onClick="colorChange()">Change the color</button>
<button onClick="colorChange('erase')">Eraser</button>
<button onClick="colorChange('pen')">Pen</button>
<button onClick="bcClear('clear')">Clear</button>
<button onClick="bcClear()">Change Background</button><br> Width: <input type="range" min="5" max="100" value="10" step="5" onChange="chWidth(this.value)" />
<!--New method -- this object -->
<button onClick="drawFrame()">Draw frame</button>
<script>
//variables for drawing
var width = 10,
color = "black",
bc = "white";
var cel = document.getElementById("container");
var canvas = cel.getContext("2d");
var clickd = false; //if clicked
//variables for animating
frame = 0;
frames = [
[]
]; //frames: [ [frame1 circles, seperate by space] [frame2] ]
//events
cel.addEventListener("mousedown", function(e) {
clickd = true;
drawSomething(e);
}, false); //draw dot, make clicking true for dragging
cel.addEventListener("mouseup", function(e) {
clickd = false;
}, false); //stop drawing
cel.addEventListener("mousemove", drawSomething, false); //\/
//draw
function drawSomething(event) {
if (clickd) { //if u are dragging
canvas.beginPath();
var newX = event.clientX - cel.getBoundingClientRect().left;
var newY = event.clientY - cel.getBoundingClientRect().top;
canvas.arc(newX, newY, width, 0, 2 * Math.PI);
canvas.fill(); //make circle
frames[frame].push(newX + " " + newY);
}
}
//clear, background color
function bcClear(param) {
if (confirm("This will erase everything on the board, OK?")) {
if (!param) {
bc = prompt("What do you want the background color to be?", "CSS colors only");
}
canvas.fillStyle = bc;
canvas.rect(-3, -3, cel.offsetWidth, cel.offsetHeight);
canvas.fill();
canvas.fillStyle = color;
}
}
//change color
function colorChange(param) {
if (param == 'erase') {
canvas.fillStyle = bc;
} else if (param == 'pen') {
canvas.fillStyle = color;
} else {
color = prompt("What color would you like?", "CSS colors only");
canvas.fillStyle = color;
}
}
//Change width
function chWidth(newWidth) {
width = newWidth;
}
//draw a certain frame
function drawFrame() {
for (var i = 0; i < frames[frame].length; i++) {
var coords = frames[frame][i].split(" ");
console.log(coords);
canvas.arc(coords[0], coords[1], width, 0, 2 * Math.PI);
canvas.fill();
}
}
</script>
</body>
</html>最佳答案
看来我在绘制这些圆圈之前忘记添加 beginPath(); 并且填充遵循我之前的路径。新的和改进的代码!
<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
</head>
<body>
<canvas id="container" width="500" height="500" style="border: 3px solid black"></canvas><br>
<button onClick="colorChange()">Change the color</button>
<button onClick="colorChange('erase')">Eraser</button>
<button onClick="colorChange('pen')">Pen</button>
<button onClick="bcClear('clear')">Clear</button>
<button onClick="bcClear()">Change Background</button><br> Width: <input type="range" min="5" max="100" value="10" step="5" onChange="chWidth(this.value)" />
<!--New method -- this object -->
<button onClick="drawFrame()">Draw frame</button>
<script>
//variables for drawing
var width = 10,
color = "black",
bc = "white";
var cel = document.getElementById("container");
var canvas = cel.getContext("2d");
var clickd = false; //if clicked
//variables for animating
frame = 0;
frames = [
[]
]; //frames: [ [frame1 circles, seperate by space] [frame2] ]
//events
cel.addEventListener("mousedown", function(e) {
clickd = true;
drawSomething(e);
}, false); //draw dot, make clicking true for dragging
cel.addEventListener("mouseup", function(e) {
clickd = false;
}, false); //stop drawing
cel.addEventListener("mousemove", drawSomething, false); //\/
//draw
function drawSomething(event) {
if (clickd) { //if u are dragging
canvas.beginPath();
var newX = event.clientX - cel.getBoundingClientRect().left;
var newY = event.clientY - cel.getBoundingClientRect().top;
canvas.arc(newX, newY, width, 0, 2 * Math.PI);
canvas.fill(); //make circle
frames[frame].push(newX + " " + newY);
}
}
//clear, background color
function bcClear(param) {
if (confirm("This will erase everything on the board, OK?")) {
if (!param) {
bc = prompt("What do you want the background color to be?", "CSS colors only");
}
canvas.fillStyle = bc;
canvas.rect(-3, -3, cel.offsetWidth, cel.offsetHeight);
canvas.fill();
canvas.fillStyle = color;
}
}
//change color
function colorChange(param) {
if (param == 'erase') {
canvas.fillStyle = bc;
} else if (param == 'pen') {
canvas.fillStyle = color;
} else {
color = prompt("What color would you like?", "CSS colors only");
canvas.fillStyle = color;
}
}
//Change width
function chWidth(newWidth) {
width = newWidth;
}
//draw a certain frame
function drawFrame() {
for (var i = 0; i < frames[frame].length; i++) {
var coords = frames[frame][i].split(" ");
console.log(coords);
canvas.beginPath();
canvas.arc(coords[0], coords[1], width, 0, 2 * Math.PI);
canvas.fill();
}
}
</script>
</body>
</html>关于javascript - 根据填充命令填充完整的 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35494398/