$(window).ready(function(){
init();
canvasShow();
$('#importPng').click(function(){ window.open(convertCanvasToImage(document.getElementById('canvas')));
});
})
function canvasShow(colors){
//顺序从远到近，从左到右
// a b
//ce d
// g f
var colors = colors || ['#f06868','#fab57a','#edf798','#80d6ff'],
data = {
a:{main:{x:126,y:76,w:60,h:120}},
b:{main:{x:248,y:148,w:72,h:82}},
c:{main:{x:42,y:170,w:70,h:100}},
d:{main:{x:292,y:178,w:42,h:104}},
e:{main:{x:94,y:166,w:66,h:138}},
f:{main:{x:270,y:222,w:42,h:84}},
g:{main:{x:192,y:246,w:56,h:66},extend:{x:208,y:226,w:24,h:34}}
},
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.clearRect(0,0,400,400);
//渐变背景
var lGrd = context.createLinearGradient(0,400, 0, 0);
lGrd.addColorStop(0.08, colors[0]);
lGrd.addColorStop(0.36, colors[1]);
lGrd.addColorStop(0.45, colors[2]);
lGrd.addColorStop(1, colors[3]);
context.beginPath();
context.arc(200, 200, 200, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = lGrd;
context.fill();
for(i in data){
for(j in data[i]){
addRect(context,data[i][j]);
}
}
}
function addRect(context,data){
context.beginPath();
context.fillStyle = getBg(context,data.x-1, data.y + data.h);
context.fillRect(data.x, data.y, data.w, data.h);
context.closePath();
context.fill();
}
function getBg(context,x,y){
var imageData = context.getImageData(x, y, 1, 1),
pixel = imageData.data,
r = pixel[0],
g = pixel[1],
b = pixel[2],
rHex = r.toString(16),
gHex = g.toString(16),
bHex = b.toString(16);
//透明度
//var a = pixel[3] / 255
//a = Math.round(a * 100) / 100;
r < 16 && (rHex = "0" + rHex);
g < 16 && (gHex = "0" + gHex);
b < 16 && (bHex = "0" + bHex);
return "#" + rHex + gHex + bHex;
}
function convertCanvasToImage(canvas) {
//var image = new Image();
//image.src =
return canvas.toDataURL("image/png");
//return image;
}
function init(){
//From colorhunt.co
//$('.item.focus .place .tran').map(function(m){return $(this).text();}).get().join(',');
//$('.item.focus .place .tran').map(function(m){return $(this).text();}).get().reverse().join(',')
var palette = [
'#f06868,#fab57a,#edf798,#80d6ff',
'#57385c,#a75265,#ec7263,#febe7e',
'#303a52,#574b90,#9e579d,#fc85ae',
'#283c63,#928a97,#fbe8d3,#f85f73',
'#425e92,#0c81f6,#5fe1d9,#f7fad1',
'#f95959,#ffe1a1,#fcffcc,#d3e785',
'#00fff5,#00adb5,#393e46,#222831',
'#83e4b5,#3ec8ac,#4e90a4,#6e60a0',
'#f8e796,#c98b70,#635270,#363863',
'#adf7d1,#95e8d7,#7dace4,#8971d0',
'#e23e57,#88304e,#522546,#311d3f',
'#364F6B,#3FC1C9,#F5F5F5,#FC5185',
'#2D4059,#EA5455,#F07B3F,#FFD460',
'#ed9153,#fbd157,#fbede1,#53435b',
'#ffbc65,#ac4c5e,#5c476f,#eeeeee'
],
str = new Array();
for(var i in palette){
li = '<li class="palette-item">'+
'<a class="palette" href="javascript:void(0);" data-id="' + i + '" data-color="' + palette[i] + '"></a>'+
'</li>';
str.push(li);
}
$('.control-box').append('<ul class="palette-box">' + str.join('') + '</ul>');
$('.palette').each(function(){
var color = $(this).data('color');
$(this).css('background','linear-gradient(-45deg,' + color + ')');
});
$('.palette').click(function(){
var colors = $(this).data('color').split(',');
$('#canvas').addClass('animate');
setTimeout(function(){
$('#canvas').removeClass('animate');
},200);
canvasShow(colors);
$(this).parent().addClass('actived').siblings().removeClass('actived');
});
}
