Question

笔的默认颜色是黑色。我想要这样，当用户按下按钮时，笔触颜色从黑色变为蓝色

我尝试在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);

只有蓝色的点会出现，而不是出现蓝色的笔触，并且按钮会由于未知原因而重置画布。我希望创建蓝色笔画，但创建黑色笔画。

Answer 1

你的意思是这样吗？

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>

Answer 2

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">

Answer 3

更新 colorBlue 功能如下

function colorBlue(){
ctx.strokeStyle = 'blue';
};

并注释 mousemove（e）功能中的 ctx.strokeStyle 如下

//ctx.strokeStyle = 'black';

如何通过单击Javascript中的按钮来更改笔触的颜色？

3 个答案: