Javascript 在html5画布中显示和绘制

我一直在尝试显示形状（坐标是用js生成的），并且可以在画布上自由绘制

如果我尝试使用相同的画布来显示，就会出现大混乱：

这是我的密码：

函数显示（）{
var canvas=document.getElementById（'displaycake_sketch'）；
context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
if（document.getElementById（'color1'）。选中）{
context.strokeStyle=“#FF0000”；
}else if（document.getElementById（'color2'）。选中）{
context.strokeStyle=“#0000FF”；
}
if（document.getElementById（'shape1'）。选中）{
弧（95,50,40,0,2*Math.PI）；
stroke（）；
}
if（document.getElementById（'shape2'）。选中）{
rect（50,27,50,100）；
stroke（）；
}
}
$（函数（）{
$（'#displaycake_sketch'）。sketch（）；
$（“.tools a”）.eq（0）.attr（“样式”、“颜色：#fba557”）；
$（“.tools a”）。单击（函数（）{
$（“.tools a”）.removeAttr（“样式”）；
$（此）.attr（“样式”，“颜色：#000”）；
});
});

O
[] 
红色
蓝色
看看：

https://intridea.github.io/sketch.js/lib/sketch.js

这不是随机的3-5秒，但由于您与canvas元素的交互，某些事件正在触发：

  this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);

您需要劫持重画方法并将您自己的代码链接到该方法，例如，一个快速而肮脏的选项是：

$(function() {
  var drawObject = $('#displaycake_sketch').sketch();
  var oldRedraw = drawObject.data('sketch').redraw;
  drawObject.data('sketch').redraw = function () {
    oldRedraw.call(this);
    display();
  }
  $(".tools a").eq(0).attr("style", "color:#fba557");
  $(".tools a").click(function() {
    $(".tools a").removeAttr("style");
    $(this).attr("style", "color:#000");
  });
});

你还想做一个
context.beginPath（）；
执行显示功能时，使涂鸦路径结束，新形状开始。（并且不清除画布，以便涂鸦路径保持不变）

最终代码为：


函数显示（）{
var canvas=document.getElementById（'displaycake_sketch'）；
context=canvas.getContext（'2d'）；
//clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
if（document.getElementById（'color1'）。选中）{
context.strokeStyle=“#FF0000”；
}else if（document.getElementById（'color2'）。选中）{
context.strokeStyle=“#0000FF”；
}
if（document.getElementById（'shape1'）。选中）{
弧（95,50,40,0,2*Math.PI）；
stroke（）；
}
if（document.getElementById（'shape2'）。选中）{
rect（50,27,50,100）；
stroke（）；
}
}
$（函数（）{
var drawObject=$（'#displaycake_sketch'）.sketch（）；
var oldRedraw=drawObject.data（'sketch'）.redraw；
window.redraw=drawObject.data（'sketch'）。redraw=function（）{
调用（这个）；
显示（）；
}
window.redraw=函数（）{
drawObject.data（'sketch'）.redraw（）；
}
$（“.tools a”）.eq（0）.attr（“样式”、“颜色：#fba557”）；
$（“.tools a”）。单击（函数（）{
$（“.tools a”）.removeAttr（“样式”）；
$（此）.attr（“样式”，“颜色：#000”）；
});
});

O
[] 
红色
蓝色
您需要将其带回绘图板。。。哈哈，对不起，我无法抗拒。不过，说真的，你需要看一看画布备忘单，主要是关于何时实际需要
beginPath（）
，以及路径需要关闭才能使用的事实。对不起，我的代码太乱了，所以我只需要删除那些“beginPath（）”？不，你需要看实际的文档。需要开始和关闭直线、圆弧和曲线的路径。你不需要一个矩形或圆形，好吧@ChrisG我已经在这里更新了我的代码，并且有一些我几乎想要的更改。我删除了
beginpath
，因为我已经生成了形状，谢谢。如果你现在试着运行我的代码，每次我涂鸦的时候，这些行都会出现，但会消失3-5秒。哇！，非常感谢你！我真的很难理解sketch.js中的代码，如何修复单选按钮中的错误？当我选择圆形时，只有圆形与矩形显示相同。颜色很好用..，这里需要闭合路径吗？您是否试图使矩形和圆形都保持不变？不，我想一次只显示一个形状。如果我选择圆形，则只会显示圆形。如果为矩形，则仅显示矩形。