笔的默认颜色是黑色。我想要这样，当用户按下按钮时，笔触颜色从黑色变为蓝色
我尝试在javascript window.addEventListener('load', () => {之前添加一个javascript function colorBlue()，但出现错误：“未捕获的ReferenceError：未定义colorBlue”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<link href="canvas.css" rel="stylesheet">
</head>
<body>
<div id="container">
<canvas id="c"></canvas>
<input class="button" onclick="colorBlue()" type="button" id="blue">Blue</button>
</div>
</body>
<script src="canvas.js"></script>
</html>
#c{
border: 1px solid black;
}
#container{
text-align: center;
}
.button{
width:10em;
height:5em;
text-align: center;
}
function colorBlue(){
const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
window.addEventListener('load', () => {
let painting = false;
//when mouse is clicked; paint
function mousedown(b){
painting = true;
//allows for paint to appear without nedding to drag mouse
mousemove(b);
}
//when mouse is not clicked; don't paint
function mouseup(){
painting = false;
//resets path each time so multiple can be created
ctx.beginPath();
}
function mousemove(b){
//if not holding down the mouse; nothing happens
if(!painting) return;
//line-width of paint
ctx.lineWidth = 10;
//roundness of paint
ctx.lineCap = 'round';
//change color
//create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
ctx.lineTo(b.clientX, b.clientY);
//end the stroke and visualize paint
ctx.stroke();
//begins a new paint so that everything doesn't just stick to a fat line
ctx.beginPath();
//move the new line to wherever the mouse goes
ctx.moveTo(b.clientX, b.clientY);
}
//starting posistion of paint line
c.addEventListener('mousedown', mousedown);
//ending posistion of paint line
c.addEventListener('mouseup', mouseup);
//whenever the mouse is moving; paint
c.addEventListener('mousemove', mousemove);
})};
const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
let painting = false;
function mousedown(e){
painting = true;
mousemove(e);
}
function mouseup(){
painting = false;
ctx.beginPath();
}
function mousemove(e){
if(!painting) return;
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
}
c.addEventListener('mousedown', mousedown);
c.addEventListener('mouseup', mouseup);
c.addEventListener('mousemove', mousemove);
只有蓝色的点会出现，而不是出现蓝色的笔触，并且按钮会由于未知原因而重置画布。我希望创建蓝色笔画，但创建黑色笔画。
答案 0 :(得分：2)
你的意思是这样吗？
function colorBlue(){
document.getElementById("c").style.border ="1px solid blue";
}#c{
border: 1px solid black;
}
#container{
text-align: center;
}
.button{
width:10em;
height:5em;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<link href="canvas.css" rel="stylesheet">
</head>
<body>
<div id="container">
<canvas id="c"></canvas>
<input class="button" onclick="colorBlue()" type="button" id="blue">Blue</button>
</div>
</body>
<script src="canvas.js"></script>
</html>
答案 1 :(得分：1)
const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
ctx.strokeStyle = "black";
window.addEventListener('load', () => {
let painting = false;
//when mouse is clicked; paint
function mousedown(b) {
painting = true;
//allows for paint to appear without nedding to drag mouse
mousemove(b);
}
//when mouse is not clicked; don't paint
function mouseup() {
painting = false;
//resets path each time so multiple can be created
ctx.beginPath();
}
function mousemove(b) {
//Get correct mouse position
var pos = getMousePos(c, b);
//if not holding down the mouse; nothing happens
if (!painting) return;
//line-width of paint
ctx.lineWidth = 10;
//roundness of paint
ctx.lineCap = 'round';
//change color
//create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
ctx.lineTo(pos.x, pos.y);
//end the stroke and visualize paint
ctx.stroke();
//begins a new paint so that everything doesn't just stick to a fat line
ctx.beginPath();
//move the new line to wherever the mouse goes
ctx.moveTo(pos.x, pos.y);
}
//starting posistion of paint line
c.addEventListener('mousedown', mousedown);
//ending posistion of paint line
c.addEventListener('mouseup', mouseup);
//whenever the mouse is moving; paint
c.addEventListener('mousemove', mousemove);
});
function colorBlue() {
ctx.strokeStyle = "blue";
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}#c {
border: 1px solid black;
}
#container {
text-align: center;
}
.button {
width: 10em;
height: 5em;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<link href="canvas.css" rel="stylesheet">
</head>
<body>
<div id="container">
<canvas id="c"></canvas>
<input class="button" onclick="colorBlue()" type="button" id="blue" value="Blue">
</div>
</body>
<script src="canvas.js"></script>
</html>
小心使用右括号。在您的代码中，colorBlue（）函数是打开的，永远不会关闭。
正如@alifallahi所提到的，要更改笔触颜色，只需将上下文strokeStyle更改为所需的任何颜色即可。
此外，当页面向下滚动时，您的代码将绘制错误的画布坐标。如@user1693593所述，使用以下函数获取鼠标相对于画布的位置。
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
最后，检查输入按钮类型元素的引用。您不应该关闭标记，无论如何都不是</button>，而应使用value属性来定义按钮文本。
<input class="button" onclick="colorBlue()" type="button" id="blue" value="Blue">
答案 2 :(得分：0)
更新 colorBlue 功能如下
function colorBlue(){
ctx.strokeStyle = 'blue';
};
并注释 mousemove（e）功能中的 ctx.strokeStyle 如下
//ctx.strokeStyle = 'black';