Zrobiłem ten (fragment poniżej) uruchomićHTML Canvas, nieostrości wyciągnąć wielokąt
var Canvas = document.getElementById('c');
var ctx = Canvas.getContext('2d');
var resize = function() {
Canvas.width = Canvas.clientWidth;
Canvas.height = Canvas.clientHeight;
};
window.addEventListener('resize', resize);
resize();
var elements = [];
var presets = {};
presets.shard = function (x, y, s, random, color) {
return {
x: x,
y: y,
draw: function(ctx, t) {
this.x += 0;
this.y += 0;
var posX = this.x + + Math.sin((50 + x + (t/10))/100) * 5;
var posy = this.y + + Math.sin((55 + x + (t/10))/100) * 7;
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(posX, posy);
ctx.lineTo(posX+random,posy+random);
ctx.lineTo(posX+random,posy+random);
ctx.lineTo(posX+0,posy+50);
ctx.closePath();
ctx.fill();
}
}
};
for(var x = 0; x < Canvas.width; x++) {
for(var y = 0; y < Canvas.height; y++) {
if(Math.round(Math.random() * 60000) == 1) {
var s = ((Math.random() * 5) + 1)/10;
if(Math.round(Math.random()) == 1){
var random = Math.floor(Math.random() * 100) + 10;
var colorRanges = ['#8c8886', '#9c9995'];
var color = colorRanges[Math.floor(Math.random() * colorRanges.length)];
elements.push(presets.shard(x, y, s, random, color));
}
}
}
}
setInterval(function() {
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
var time = new Date().getTime();
for (var e in elements)
elements[e].draw(ctx, time);
}, 10);
<canvas id="c" width="1000" height="1000"\>
po prostu trzeba dodać jeszcze jedną funkcję, aby móc używać go na stronie buduję to dla. Niektóre pływające odłamki muszą być rozmyte, aby dać poczucie głębi.
Czy płótno może to zrobić, a jeśli tak, to w jaki sposób?
Dzięki!
_Can Płótno to zrobić, a jeśli tak, to jak _ Spróbuj [badać? it] (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) siebie – hindmost
@markE Nie powiedziałem, że jest nieważny, po prostu sugeruję OP, aby najpierw spróbował znaleźć rozwiązanie. – hindmost
@markE Aby przekonać OP, że Canvas nie ma gotowej do użycia funkcji/metody – hindmost