Tag:Polygonal pattern

  • Drawing circular polygon pattern based on HTML5

    Time:2021-7-9

    Let’s first look at the simplest rendering: The code is as follows: JavaScript CodeCopy content to clipboard var canvas = document.getElementById(‘my’), ctx = canvas.getContext(‘2d’);      setInterval(function(){        ctx.clearRect(0,0,400,400);        ctx.save();        ctx.translate(200,200);        var ci =90, pi = Math.PI / ci, x1 = 100, y1 =0, x2 =0, y2 =0, x3 =0, y3 =0;        ctx.beginPath();        for(var i = ci *2; i >0; i–){          ctx.rotate(pi);          ctx.moveTo(x1,y1);          y2 = x1 * Math.sin(pi);          x2 = x1 * Math.cos(pi);          x3 = (x1 – x2) /2+ x2 +10+ Math.random() *20;          y3 = y2 /2;          ctx.lineTo(x3,y3);          ctx.lineTo(x2,y2);        }        ctx.stroke();        ctx.restore();    […]