Question

当鼠标悬停在按钮上时，我无法更改笔触的颜色。我已经尝试过自己解决这个问题。

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

ctx.beginPath();

  ctx.moveTo(17, 7);
  ctx.bezierCurveTo(13, -8, 26, 21, 12, 26);
  ctx.bezierCurveTo(-2, 31, 59, 64, 33, 18);

ctx.lineWidth = 8;
ctx.strokeStyle =  "#3d7eb8";
if (document.getElementById("one").style.backgroundColor == "#3d7eb8"){
    ctx.strokeStyle = "#fffced";
}
ctx.stroke();
function button1hover (){
    document.getElementById("one").style = "background-color: #3d7eb8";
}
function button1unhover (){
    document.getElementById("one").style = "background-color: #fffced";
 }

<button onmouseout="button1unhover()" onmouseover="button1hover()" id="one" class="button column center">
                   <canvas height="50px" width="50px" id="canvas1"></canvas> 
                   <p>Inici</p> 
                </button>

Answer 1

这真的不是JS的工作，这全部可以通过CSS和曲线上的微小内嵌SVG来完成。

#one {
  background-color: #fffced;
}

#one svg {
  width: 50px;
  height: 50px;
}

#one:hover {
  background-color: #3d7eb8;
}

#one path {
  fill: none;
  stroke-width: 8px;
  stroke: #3d7eb8;
}

#one:hover path {
  stroke: #fffced;
}

<button id="one" class="button column center">
  <svg><path d="M 17 7 C 13 -8 26 21 12 26 -2 31 59 64 33 18" /></svg>
  <p>Inici</p> 
</button>

如果使用更少或使用sass / scss，甚至CSS也会更好

#one {
  background-color: #fffced;

  svg {
    width: 50px;
    height: 50px;
  }

  path {
    fill: none;
    stroke-width: 8px;
    stroke: #3d7eb8;
  }

  &:hover {
    background-color: #3d7eb8;

    path {
      stroke: #fffced;
    }
  }
}

要回答为什么您的代码不起作用的问题：在开始时，画布仅渲染一次。要更改它，您必须使用具有反射性的颜色在button1hover()和button1unhover()内部重新渲染它。

即使这样，也不能保证document.getElementById("one").style.backgroundColor == "#3d7eb8"可以正常工作。因为根据浏览器，.style.backgroundColor可能会将颜色返回为rgb(...)值。

因此，最好定义一个存储状态并进行切换/检查的变量。

Answer 2

如前所述，最好在CSS中完成。

但是，如果您希望在JS中进行操作，则可以尝试这样的操作：

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.beginPath();

ctx.moveTo(17, 7);
ctx.bezierCurveTo(13, -8, 26, 21, 12, 26);
ctx.bezierCurveTo(-2, 31, 59, 64, 33, 18);

ctx.lineWidth = 8;
ctx.strokeStyle =  "#3d7eb8";

ctx.stroke();

function button1hover() {
    this.style.background = "#3d7eb8";
    ctx.strokeStyle = "#fffced";
    ctx.stroke();
}

function button1unhover() {
    this.style.background = "#fffced";
    ctx.strokeStyle = "#3d7eb8";
    ctx.stroke();
}

document.getElementById('one').addEventListener("mouseover",button1hover);
document.getElementById('one').addEventListener("mouseout",button1unhover);

<button id="one" class="button column center">
  <canvas height="50px" width="50px" id="canvas1"></canvas> 
  <p>Inici</p> 
</button>

eventListeners是您处理此类事情的朋友，对于画布，我不确定是否有比每次重绘更好的选择。

无法从javascript更改颜色

2 个答案: