使用jQuery Colorpicker插件更改HTML5 Canvas中线段的颜色

Question

我有一个HTML5画布，上面有几个线段。 我想添加一个jQuery颜色选择器，以便可以让用户更改这些段的笔触颜色。 如何从颜色选择器中获取值以应用于特定的线段？

编辑...好吧，到目前为止，我已经知道了，但我不知道如何让这条线接起新的myPicker

<script type="text/javascript" src="jscolor.js"></script>

<script type="text/javascript">
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
</script>

<script type="application/javascript" language="javascript">
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var myStroke = "#ff0000";

    context.moveTo(100, 150);
    context.lineTo(450, 150);
    context.lineWidth = 10;
    context.strokeStyle = myStroke;
    context.stroke();
};
</script>

Answer 1

尚未测试过，但这应该可行：

$('#yourColorpickerField').ColorPicker({
onChange: function(hsb, hex, rgb, el) {
    var newColor = $(el).val(hex);

    var context = canvas.getContext('yourCanvasName');
    context.fillStyle = newColor;
    // here, you can draw your line again, or if you're already doing it on an interval, it should be fine for the next time you call it
}
});

假设您的线条都是相同的颜色。 我看到您希望将其仅应用于“特定的线段”，在这种情况下，您需要修改上面的代码。 这将在很大程度上取决于现有代码的外观，但是基本上，您无需将context.fillStyle设置为新颜色，而是将新颜色值存储在另一个变量中，以备以后使用时读取绘制特定的线段（此时，您将在绘制线之前将context.filleStyle设置为颜色）。