使用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中線段的顏色

回答

相關問題