JavaScript

語言：

JaveScriptBabelCoffeeScript

確定

console.clear();

const canvas = document.querySelector('.stage'),

ctx = canvas.getContext('2d'),

canvasSize = 200,

midpt = {x:canvasSize * .5, y:canvasSize * .5},

maxRadius = canvasSize * .4,

mcos = Math.cos,

mmax = Math.max,

mrandom = Math.random,

mround = Math.round,

msin = Math.sin,

msqrt = Math.sqrt,

tau = Math.PI * 2,

PI180 = Math.PI/180,

fillColour = 'hsla(45, 23%, 90%, .3)',

strokeColour = 'hsla(45, 23%, 90%, .8)';

const offscreen = document.createElement('canvas'),

offscreenCtx = offscreen.getContext('2d'),

offscreenSize = 40,

paper = document.querySelector('.paper');

let sections = [];

document.body.addEventListener('click', () => animate() );

canvas.width = canvasSize;

canvas.height = canvasSize;

ctx.fillStyle = fillColour;

ctx.strokeStyle = strokeColour;

ctx.lineWidth = .5;

offscreenCtx.width = offscreenSize;

offscreenCtx.height = offscreenSize;

const Trunk = function(o, rot){

this.root = {x:o.x, y:o.y};

this.rotation = rot;

this.length = mrandom() * (maxRadius * .25) + (maxRadius * .75);

this.tip = getPolarPoint(this.length, this.rotation, this.root);

this.spurs = [];

this.spurs1 = [];

this.spurs2 = [];

this.spurDeets = [];

this.numSpurs = mround(mrandom() * 2 + 8);

}

Trunk.prototype.generate = function(){

let step = (this.length * .95) / this.numSpurs;

for(let i=0; i

let spurDeetObj = {};

spurDeetObj.step = step;

spurDeetObj.spurLength = step * i + (mrandom() * (i === this.numSpurs-1 ? 5 : 30) + 5);

spurDeetObj.spurRotation = mrandom() * 10 + (i === 0 ? 30 : 5);

this.spurDeets.push(spurDeetObj);

}

this.buildSpurs();

}

Trunk.prototype.buildSpurs = function(){

for(let i=0; i

let spurDeet = this.spurDeets[i];

let root = getPolarPoint(spurDeet.step * i, this.rotation, this.root);

this.spurs1.push(new Spur(root, getPolarPoint(spurDeet.spurLength, this.rotation + spurDeet.spurRotation, this.root)));

this.spurs2.push(new Spur(root, getPolarPoint(spurDeet.spurLength, this.rotation - spurDeet.spurRotation, this.root)));

}

this.spurs = this.spurs1.concat(this.spurs2.reverse());

}

Trunk.prototype.clone = function(){

let cloneObj = {};

cloneObj.length = this.length;

cloneObj.tip = this.tip;

cloneObj.numSpurs = this.numSpurs;

cloneObj.spurDeets = this.spurDeets;

return cloneObj;

}

Trunk.prototype.buildFromClone = function(cloneObj){

this.length = cloneObj.length;

this.numSpurs = cloneObj.numSpurs;

this.spurDeets = cloneObj.spurDeets;

this.buildSpurs();

}

Trunk.prototype.draw = function(seed = .5){

// Centre of trunk

ctx.beginPath();

ctx.moveTo(this.root.x, this.root.y);

ctx.lineTo(this.tip.x, this.tip.y);

ctx.stroke();

// Centre of spurs

for(let i=0; i

this.spurs[i].drawSpur();

}

// Edges of spur

ctx.moveTo(this.spurs[0].root.x, this.spurs[0].root.y);

ctx.beginPath();

// Outward side

for(let i=0; i

ctx.lineTo(this.spurs1[i].tip.x, this.spurs1[i].tip.y);

}

// Draw to tip of trunk

ctx.lineTo(this.tip.x, this.tip.y);

// Inward side

for(let i=0; i

ctx.lineTo(this.spurs2[i].tip.x, this.spurs2[i].tip.y);

}

if(seed > .5){

ctx.lineTo(this.spurs[0].root.x, this.spurs[0].root.y);

}

ctx.stroke();

ctx.fill();

}

const Spur = function(root, tip){

this.root = root;

this.tip = tip;

}

Spur.prototype.drawSpur = function(){

ctx.beginPath();

ctx.moveTo(this.root.x, this.root.y);

ctx.lineTo(this.tip.x, this.tip.y);

ctx.stroke();

}

function getPolarPoint(distance, degree, origin){

let radian = degree * PI180;

return {x:distance * mcos(radian) + origin.x, y:distance * msin(radian) + origin.y}

}

function create(){

ctx.clearRect(0,0,canvasSize,canvasSize);

sections = [];

let offset = 0;//mrandom() * 360;

let howMany = mround(mrandom()*5+5);

let t0 = new Trunk(midpt, offset);

t0.generate();

let sharedStructure = t0.clone();

sections.push(t0);

for(let i=1; i

let t = new Trunk(midpt, ((360 / howMany) * i) + offset);

t.buildFromClone(sharedStructure);

sections.push(t);

}

}

function useCanvasAsBackground(){

offscreen.height = offscreen.width = offscreenSize;

offscreenCtx.drawImage(canvas, 0, 0, offscreenSize, offscreenSize);

let url = offscreen.toDataURL('image/png');

paper.style.backgroundImage = 'url(' + url + ')';

}

function draw(){

let seed = mrandom();

for(let i=0; i

sections[i].draw(seed);

}

useCanvasAsBackground();

}

function animate(){

create();

draw();

// setTimeout(() => animate(), 1000);

}

animate();

總結

以上是生活随笔為你收集整理的html桌面雪花,html5 canvas雪花形状在线生成器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。