HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Online Drawing Program</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="canvas"></div>
<script src="script.js"></script>
</body>
</html>
Javascript：
function drawingProgram(width, height) {
this.width = width;
this.height = height;
this.mousedown = false;
this.makeCanvas = function () {
for (var row = 0; row <= this.height; row++) {
$("#canvas").append("<div class='row' id='row" + row + "'></div>");
for (var col = 0; col <= height; col++) {
$("#row" + row).append("<div class='pixel'></div>");
}
}
}
this.draw = function (el) {
console.log("drawing");
$(el).css({ "background-color": "black" });
}
}
var drawing = new drawingProgram(50, 50);
drawing.makeCanvas();
$("body").on("mousedown", function () { drawing.mousedown = true });
$("body").on("mouseup", function () { drawing.mousedown = false });
$(".pixel").on("mouseover", function () {
if (drawing.mousedown) {
drawing.draw(this);
}
});
.CSS：
.row {
display:block;
margin-top:-12px;
}
.pixel {
user-select: none;
flex-wrap:wrap;
display:inline-block;
width:5px;
height:5px;
border:1px solid black;
}
正在运行的程序在这里：https://online-drawing-program.powercoder.repl.co/问题：该程序仅使画布底部的像素变为黑色。它仅在我按下底部像素时检测。但是，我想检测我所有的像素div。
像素太小，以及其他CSS问题。
我添加了一个颜色选择器只是为了好玩。
function drawingProgram(width, height) {
this.width = width;
this.height = height;
this.mousedown = false;
this.color = "black"
this.makeCanvas = function() {
for (var row = 0; row <= this.height; row++) {
$("#canvas").append("<div class='row' id='row" + row + "'></div>");
for (var col = 0; col <= this.width; col++) {
$("#row" + row).append("<div class='pixel'></div>");
}
}
}
this.draw = function(el) {
console.log("drawing");
$(el).css({
"background-color": this.color
});
}
return this
}
var drawing = new drawingProgram(20, 20);
drawing.makeCanvas();
$("body").on("mousedown", function(e) {
drawing.mousedown = true
});
$("body").on("mouseup", function(e) {
drawing.mousedown = false
});
$(".pixel").on("mouseover", function() {
if (drawing.mousedown) {
drawing.draw(this);
}
});
$("#colorpicker div").on("click", function() {
drawing.color = $(this).data("color")
})#colorpicker {
width: 100px;
height: 20px;
display: flex;
border: 1px solid black;
}
#colorpicker div {
display: block;
width: 20px;
height: 20px;
}
.row {
display: block;
margin: 0;
line-height: 1;
height: 12px;
}
.pixel {
user-select: none;
flex-wrap: wrap;
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="colorpicker">
<div data-color="red" style="background-color: red;"></div>
<div data-color="yellow" style="background-color: yellow;"></div>
<div data-color="green" style="background-color: green;"></div>
<div data-color="black" style="background-color: black;"></div>
<div data-color="white" style="background-color: white;"></div>
</div>
<div id="canvas"></div>建议
如果你想要一个绘图程序，那么你应该看看画布API - 这正是针对这类事情的。 有关画布的更多信息：
- 基本：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- 教程：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial