-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolor_picker.js
65 lines (57 loc) · 2.47 KB
/
color_picker.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var imgData;
var imgData = ctx.createImageData(1, 1);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 23;
imgData.data[i+1] = 255;
imgData.data[i+2] = 248;
imgData.data[i+3] = 255;
}
var colorctx;
function initColorPicker() {
var canvas = document.getElementById('colorCanvas');
var canvasContext = canvas.getContext("2d", {willReadFrequently: true})
let gradient = canvas.getContext('2d').createLinearGradient(0, 0, canvas.width, 0)
gradient.addColorStop(0, '#ff0000')
gradient.addColorStop(1 / 6, '#ffff00')
gradient.addColorStop((1 / 6) * 2, '#00ff00')
gradient.addColorStop((1 / 6) * 3, '#00ffff')
gradient.addColorStop((1 / 6) * 4, '#0000ff')
gradient.addColorStop((1 / 6) * 5, '#ff00ff')
gradient.addColorStop(1, '#ff0000')
canvas.getContext('2d').fillStyle = gradient
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)
gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)')
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)')
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
canvas.getContext('2d').fillStyle = gradient
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)
gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)')
gradient.addColorStop(0.5, 'rgba(0, 0, 0, 0)')
gradient.addColorStop(1, 'rgba(0, 0, 0, 1)')
canvas.getContext('2d').fillStyle = gradient
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)
canvas.onclick = function(e) {
console.log()
var imgData = canvasContext.getImageData((e.offsetX / canvas.clientWidth) * canvas.width, (e.offsetY / canvas.clientHeight) * canvas.height, 1, 1)
var rgba = imgData.data;
var color = "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")";
var pencolor = "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")";
console.log("%c" + color, "color:" + color)
var i;
pencolor = ""
ctx.fillStyle = color
pencolor = color;
// var imgData = ctx.createImageData(1, 1);
// for (i = 0; i < imgData.data.length; i +=4) {
// imgData.data[i+0] = 239;
// imgData.data[i+1] = 111;
// imgData.data[i+2] = 122;
// imgData.data[i+3] = 255;
// }
console.log(pencolor)
}
}
initColorPicker()