解决方案

Question

我不知道为什么，但clearRect（）不起作用。这是每次单击面板或每次更改厚度值时执行的功能。

//When click on a menu section
$(".menuSection").click(function() {
//Show hide the selected item
$(this).next().toggle();
//hide all the other panels
$(this).next().siblings(".panel").hide();
//To update the values in the colors panel when selected
if ( $(this).prop("id") == "colors" ) {
    changeColorBySliders();
}
if ( $(this).prop("id") == "pen" ) {
     updatePreview();
}
});

//when thickness slider change:
$("#penPanel input[type=range]").on("input", updatePreview);

事实是它画了一条线，但是如果我再次点击它就不会重置。

var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");

//Function to update the pen's preview
function updatePreview() {
  console.log($("#thickness").val());
  var rgba = $("#mainCanvas").css("background-color");
  $("#preview").css("background-color", rgba);
  //Resetting the preview
  contextPreview.clearRect(0, 0, $preview.width, $preview.height);
  //Drawing an example path
  contextPreview.beginPath();
  contextPreview.moveTo(50, 30);
  contextPreview.lineTo(100, 110);
  contextPreview.quadraticCurveTo(115, 120, 125, 80);
  contextPreview.bezierCurveTo(145, -40, 150, 120, 200, 95);
  contextPreview.lineTo(250, 65);
  contextPreview.lineWidth = $("#thickness").val();
  contextPreview.strokeStyle = color;
  contextPreview.stroke();
  contextPreview.closePath();
}

任何帮助？

Answer 1

解决方案

我使用这种声明解决了这个问题：

var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0, 0, preview.width, preview.height);

jquery one的内心：

var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");

为什么？

因为 $ preview 是一个jQuery对象， $ preview.width 因此是函数，所以当你调用 clearRect时（），您实际上正在调用 contextPreview.clearRect（0,0，function，function），因此您的rect尺寸未定义或为0，因此它不会清除单个像素。

所以你仍然可以使用jQuery，但要确保你调用 contextPreview.clearRect（0,0，$ preview [0] .width，$ preview [0] .height）

var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)

特别感谢Kaiido。

无法清除画布

1 个答案:

解决方案

为什么？