selector de color en canvas
JavaScript
Actualizado el 17 de Marzo del 2018 por Anonymous (35 códigos) (Publicado el 24 de Septiembre del 2017)
2.951 visualizaciones desde el 24 de Septiembre del 2017
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta(1)(1)
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="520" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var dibujar = new Boolean(false);
context.fillStyle="#FAFAFA"; /* color del fondo */
context.strokeStyle="#BDBDBD"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(0,471);/* punto de inicio x, y (30=x,0=y) */
context.quadraticCurveTo(0,71,81,524);
context.lineTo(81,524);
context.lineTo(634,524);
context.lineTo(714,472);/* dibuja linea */
context.quadraticCurveTo(714,1,664,2);
context.lineTo(714,80);
context.quadraticCurveTo(714,1,664,2);
context.lineTo(664,2);
context.lineTo(50,1);
context.quadraticCurveTo(1,1,2,50);
context.lineTo(2,82);
context.lineTo(0,463);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#FF0000"; /* color del fondo */
context.strokeStyle="#FF0000"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(356,336);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(714,84);/* dibuja linea */
context.quadraticCurveTo(714,1,664,2);
context.lineTo(664,2);
context.lineTo(360,224);
context.lineTo(50,1);
context.quadraticCurveTo(1,1,2,50);
context.lineTo(2,81);
context.lineTo(356,336);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#DF0101"; /* color del fondo */
context.strokeStyle="#DF0101"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(2,82);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(0,438);/* dibuja linea */
context.quadraticCurveTo(1,523,81,523);
context.lineTo(81,523);
context.lineTo(81,140);
context.lineTo(2,84);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#DF0101"; /* color del fondo */
context.strokeStyle="#DF0101"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(632,524);/* punto de inicio x, y (30=x,0=y) */
context.quadraticCurveTo(713,523,714,473);
context.lineTo(714,473);/* dibuja linea */
context.lineTo(715,83);
context.lineTo(632,140);
context.lineTo(632,524);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#D8D8D8"; /* color del fondo */
context.strokeStyle="#D8D8D8"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(632,524);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(632,140);/* dibuja linea */
context.lineTo(356,337);
context.lineTo(632,524);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#D8D8D8"; /* color del fondo */
context.strokeStyle="#D8D8D8"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(356,337);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(351,333);/* dibuja linea */
context.lineTo(83,514);
context.lineTo(81,525);
context.lineTo(356,337);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
//degradado de colores
var degradado=context.createLinearGradient(600,10,242,58,545,116);//puntos donde inician y terminan cada degradado
degradado.addColorStop(0,"#D8D8D8");
degradado.addColorStop(1,"#FFF");
//degradado.addColorStop(2,"#BDBDBD");
context.fillStyle=degradado;
context.beginPath();/* inicio de trasado */
context.moveTo(55,0);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(360,223);
context.lineTo(668,2);
context.lineTo(55,0);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
c.onmouseup = function(){
dibujar = false; }c.onmousedown = function(){
dibujar = true; }c.onmousemove = function(event){
x = event.pageX - c.offsetLeft;
y = event.pageY - c.offsetTop;
var imgData = context.getImageData(x, y, 1,1);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
document.getElementById("color").style.background= "rgb("+red+","+green+","+blue+")";
document.getElementById("pickercolor").innerHTML = (red + " " + green + " " + blue + " " + alpha + "<br> Cordenada X: " + x +"<br> Cordenada Y: "+ y);
}</script>
<p id="pickercolor"></p>
<div widht="20px" height="20px" id="color" style="width:25vh; max-width:100px; height:25vh; max-height:100px; position:relative;"></div>
</body>
</html>
