ドロネー分割した三角形を塗る
by abbcd
HTML
<canvas id="can"></canvas>
CSS
#can {
background: #efefef;
}
JavaScript
$(document).ready(function () {
var SAMPLE = {};
SAMPLE.Main = (function () {
var canJqObj = $("#can"),
canDom = document.getElementById('can'),
ctx = document.getElementById('can').getContext("2d"),
// 色のコレクション(最低4色)
colors = [
// http://www.colourlovers.com/palette/2490997/HJ_Project_Palette
["#000000", "#FF0080", "#00D4ED", "#D2D2D2", "#FFFFFF"],
// http://www.colourlovers.com/palette/2490986/all_night_long_.
["#ED146F", "#EDDE45", "#61D2D6", "#242424", "#FAFAFA"],
// http://www.colourlovers.com/palette/2490977/SILVIA_PELISSERO_APC
["#110E19", "#B60F19", "#F86F07", "#FF9F33", "#C1D8A0"],
// http://www.colourlovers.com/palette/2490968/navy_blend
["#14343C", "#DDE915", "#1C15E9", "#A83C17", "#159797"],
// http://www.colourlovers.com/palette/2491000/w_a_t_e_r_m_e_l_o_n
["#E9625C", "#B5C368", "#0A3D5D", "#CCE9C7", "#C9D88A"],
//http://www.colourlovers.com/palette/1483942/The_Autumn_Queen_HPP
["#4E2E1E", "#EA4F6C", "#F99548", "#FCCA55"],
//http://www.colourlovers.com/palette/1297074/Autumn_Rainbow
["#6D2243", "#EC5E0C", "#F78F1E", "#85871A"],
//http://www.colourlovers.com/palette/36998/french_roast
["#A7321C", "#FFDC68", "#928941", "#352504"],
//http://www.colourlovers.com/palette/582235/October_Roads
["#821F29", "#F6E03F", "#ADBD06", "#D46600"], ],
// 使用する色をランダムに選定
colorIndex = Math.floor(Math.random() * (colors.length - 1));
// ==================================================
// 頂点
// ==================================================
function Vertex(x, y, vx, vy) {
this.x = x;
this.y = y;
// 固定頂点かどうか(true:固定、false:移動)
this.isStatic = ((vx == undefined ||...