Geek Answers Handbook

HTML canvas, blur the drawn polygon

I did it (follow the snippet below)

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"\>

I just need to add one function in order to be able to use it on the site for which I create it. Some of the floating fragments should be blurred to give a sense of depth.

Can Canvas do this, and if so, how?

Thanks!

+5
source share
1 answer

I used this a few months ago, maybe it can work for you too:

 var canvas = document.getElementById("heroCanvas"); var canvasContext = canvas.getContext("2d"); var canvasBackground = new Image(); canvasBackground.src = "image.jpg"; var drawBlur = function() { // Store the width and height of the canvas for below var w = canvas.width; var h = canvas.height; // This draws the image we just loaded to our canvas canvasContext.drawImage(canvasBackground, 0, 0, w, h); // This blurs the contents of the entire canvas stackBlurCanvasRGBA("heroCanvas", 0, 0, w, h, 100); } canvasBackground.onload = function() { drawBlur(); }

Here's the source: http://zurb.com/playground/image-blur-texture

+1
source

More articles:


All Articles