javascript - Javascript画布改变绘图颜色
问题描述
我正在使用 HTML 和 JavaScript(节点作为服务器端)制作一个简单的绘图板,但我不知道如何制作一个颜色选择器来更改油漆的颜色。我知道如何对其进行硬编码,但这不是我想要的。
我想要按钮之类的东西,如果您单击按钮,它将变成特定的颜色。像4个按钮。
这是我的方法:
//Function for when the mouse button is clicked.
canvas.onmousedown = function (e) {
//The mouse button is clicked (true).
mouse.click = true;
context.strokeStyle = "red";
};
如您所见,我已将颜色硬编码为红色。
这是我的完整 JavaScript 代码。HTML 文档仅包含一个元素“画布”。
//"DOMContetLoaded tells the browser then the HTML page has finished loading.
document.addEventListener("DOMContentLoaded", function () {
//Add standard mouse functions.
var mouse = {
click: false,
move: false,
pos: { x: 0, y: 0 },
pos_prev: false
};
//Get the CanvasWhiteboard elements by it's ID from the HTML page. We need this to be able to draw.
var canvas = document.getElementById('whiteboard');
//The whiteboard is in 2D with the width and height being the dimensions of the window.
var context = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
//The client connects to the server.
var socket = io.connect();
//The width and height of the whiteboard equals the window width and height.
canvas.width = width;
canvas.height = height;
// Function for when the mouse button is pushed down.
canvas.onmousedown = function (e) {
// Set mouse click to true.
mouse.click = true;
context.strokeStyle = "red";
};
// Function for when the mouse button is lifted.
canvas.onmouseup = function (e) {
// Set mouse click to false.
mouse.click = false;
};
// Function to check if the mouse is moved.
canvas.onmousemove = function (e) {
//The movement of the mouse at X and Y position is updated everytime the mouse moves.
//The coordinates equals the coordinates relative to the window height and width.
mouse.pos.x = e.clientX / width;
mouse.pos.y = e.clientY / height;
//The mouse is moving (true).
mouse.move = true;
};
//Listen for draws from other clients.
socket.on('draw_data', function (data) {
//The line being drawn equals the data.
var line = data.line;
//Begin from the start of the drawn data.
context.beginPath();
//The thickness of the line.
context.lineWidth = 2;
//Next point to move to from the beginPath.
context.moveTo(line[0].x * width, line[0].y * height);
//End point to move to from the beginPath.
context.lineTo(line[1].x * width, line[1].y * height);
//The data is then drawn on the whiteboard.
context.stroke();
});
//This loop is where our own drawings are sent to the server for the other clients to see.
//It checks every 25ms if the mouse is being clicked and moved.
function mainLoop() {
if (mouse.click && mouse.move && mouse.pos_prev) {
//Send our drawing to the server.
socket.emit('draw_data', { line: [mouse.pos, mouse.pos_prev] });
//The mouse movement is set to false (reset).
mouse.move = false;
}
//The previous position now equals the position we just were at.
mouse.pos_prev = { x: mouse.pos.x, y: mouse.pos.y };
//This is where the 25ms is definend.
setTimeout(mainLoop, 25);
}
//Being called recursively.
mainLoop();
});
解决方案
您也可以使用 CSS 来完成,单击按钮时将 Canvas 更改为红色
canvas{
background-color:red;
}
或者试试这个代码:
//Function for when the mouse button is clicked.
canvas.onmousedown = function (e) {
//The mouse button is clicked (true).
mouse.click = true;
ctx.fillStyle = 'red';
};
推荐阅读
- ansible - Ansible:有没有办法导入整个标签列表?
- javascript - 如何使用 guildUpdate 和猫鼬保存新的服务器名称?| 不和谐.js
- excel - 表格行和表格列之间的 Excel SUMPRODUCT
- java - 分配有多个值的java变量
- mysql - 为什么我不能使用命令行连接到 mysql 但可以使用 DataGrip 连接?
- javascript - Redux 不能在一个组件中仅适用于 React Native 应用程序
- python - 自定义分箱颜色条:无法设置刻度标签
- javascript - 当我运行我的程序时,出现内存不足错误
- c++ - 有没有办法捕捉没有给出正确参数的 STL 函数的异常?
- c++ - 字符串变量的大小