使用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>
答
没有测试过,但是这应该工作:
$('#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设置为该颜色)。
我用代码更新了我的问题 –
同样的想法应该适用 - 在ColorPicker的onChange回调函数中,将颜色(十六进制代码)存储到某个变量中,然后稍后使用该变量的值来知道要绘制的颜色即在您调用stroke()那一特定时间之前,将context.strokeStyle设置为等于该值)。 – Josh1billion