canvas 圆角矩形填充_Canvas：随机长方形生成和色块填充

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var can = document.getElementById("art");

var can_c = can.getContext("2d");

//can_c.fillRect(50, 25, 150, 100);

//creates random height rectangles with random colors

function randomify(hue) {

can.width = can.width;

var ran;

var ranc = "";

//creates grid accdg. to this tutorial http://diveintohtml5.info/canvas.html

for (var i = 0.5; i <= 700; i += 10) {

can_c.moveTo(i, 0);

can_c.lineTo(i, 399.5);

can_c.moveTo(0, i);

can_c.lineTo(699.5, i);

}

can_c.strokeStyle = "#efefef";

can_c.stroke();

for(var c = 0.5; c <= 699.5; c += 10) {

ran = Math.floor(Math.random() * 40 + 1);

ranc = 'hsl(' + hue + ', ' + Math.floor(Math.random() * 99) + '%, ' + Math.floor(Math.random() * 99) + '%)';

can_c.fillStyle = ranc;

console.log(ranc);

can_c.fillRect(c, 0.5, 10, ran * 10);

}

}

//default reddish violet

randomify(340);

$(document).ready(function() {

//$('#art').css('border-width', '10');

$('.color-boxes div').click(function() {

$('.color-boxes div').removeClass('sel');

$(this).addClass('sel');

randomify($(this).attr('data-color'));

});

$('#ran').click(function() {

randomify($('.color-boxes .sel').attr('data-color'));

});

});