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

我有一个HTML5画布，其上有多个线段。我想添加一个jQuery颜色选择器，这样我可以让用户更改这些片段的笔触颜色。如何从ColorPicker获取值以应用于特定线段？使用jQuery Colorpicker插件更改HTML5 Canvas中线段的颜色

编辑...好吧，我已经远远得到它这个笑，但我无法弄清楚如何让行拿起新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>

来源

2011-11-17 Fred Turner

没有测试过，但是这应该工作：

$('#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设置为该颜色）。

来源

2011-11-17 03:33:05 Josh1billion

我用代码更新了我的问题 –

同样的想法应该适用 - 在ColorPicker的onChange回调函数中，将颜色（十六进制代码）存储到某个变量中，然后稍后使用该变量的值来知道要绘制的颜色即在您调用stroke（）那一特定时间之前，将context.strokeStyle设置为等于该值）。 – Josh1billion

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

回答

相关问题