Question

我正在尝试根据颜色选择器的用户输入来更改学校项目的画布元素的背景。但是我似乎无法使其正常工作。我检查了代码，似乎一切都已正确选择。有什么想法吗？

docolor() {
  var myCanvas = document.querySelector("#myCanvas");
  var colorinput = document.querySelector("#clr");
  var color = colorinput.value;
  myCanvas.style.backgroundColor = color;
}

  <head>
    <title> canvas practice </title>
   </head>
  <body>
    <canvas id = "myCanvas"> 
    </canvas> 
    <br>
    <input type = "color" value = "#001A57" id = "clr" onchange = "docolor()">
  </body>
</html>

-

#clr {
  display: inline-block;
}

#myCanvas {
  height: 150px;
  width: 300px;
  border: 2px solid;
}

Answer 1

您似乎忘记了geom_point声明。

library(tidyverse)
library(zoo)

set.seed(1)
N=184
A = runif(N, 50, 100)
G = seq(1:N)
FakeData = data.frame(A, B = A + 20, C = A + 40, D = A - 20, E = A + 10, F = A - 15, G)

lab=c("May", "Jun", "July", "Aug", "Sep", "Oct", "Nov")

CType = c("Upper and lower Quartile" = "grey75", "Maximum" = "red", "Minimum" = "black", "Median" = "darkblue", "Precipitation" = "blue")
LType = c("Upper and lower Quartile" = "solid", "Maximum" = "dashed", "Minimum" = "dashed", "Median" = "solid", "Precipitation" = "dotted")

ggplot(FakeData, aes(x = G))+
  geom_ribbon(aes(ymin = A, ymax = B), fill= "grey75")+
  geom_line(aes(y = A, colour = "Upper and lower Quartile", linetype = "Upper and lower Quartile"), size = 1.3)+
  geom_line(aes(y = B, colour = "Upper and lower Quartile", linetype = "Upper and lower Quartile"), size = 1.3)+
  geom_line(aes(y = C, colour = "Maximum", linetype = "Maximum"), size = 1.3)+
  geom_line(aes(y = D, colour = "Minimum", linetype = "Minimum"), size = 1.3)+
  geom_line(aes(y = E, colour = "Median", linetype = "Median"), size = 1.3)+
  geom_line(aes(y = F, colour = "Precipitation", linetype = "Precipitation"), size = 1.3)+ 
  scale_x_continuous(breaks = c(0,31,61,92,123,153,184), labels = lab)+ 
  xlab("Month")+ 
  ylab("Daily Cumulative Precipitation (mm)")+ 
  theme_bw()+
  scale_color_manual(name = "legend", values = CType)+
  scale_linetype_manual(name = "legend", values = LType)+
  theme(legend.position = c(.2, .8), legend.title = element_blank(), legend.key.width = unit(2, "cm"))

Answer 2

docolor的定义不正确，因此它永远不会运行。像这样声明您的功能，它应该可以工作：

function docolor() {
  var myCanvas = document.querySelector("#myCanvas");
  var colorinput = document.querySelector("#clr");
  var color = colorinput.value;
  myCanvas.style.backgroundColor = color;
}

让我知道它是否仍然无法正常工作。 Here's a link to a working codepen，如果您希望看到所有的东西都可以一起工作。祝您好运！

Onchange颜色选择器不更改画布背景颜色

2 个答案: