javascript - How to fillStyle all circles in different color in canvas: red, yellow, blue and green? -


i looking way fillstyle of circles in 4 colors: #00ce66, #e3bf37, #cc5543, #a1b7c2. want circles show in way: 25% of circles red, 25% circles yellow… etc. on canvas while page loaded.

when added math.random() , put inside colors, circles black. please :-) 

(function() {     var width, height, largeheader, canvas, ctx, circles, target, animateheader = true;      // main     initheader();     addlisteners();      function initheader() {         width = window.innerwidth;         height = window.innerheight;         target = {x: 0, y: height};          largeheader = document.getelementbyid('large-header');         largeheader.style.height = height+'px';          canvas = document.getelementbyid('canvas');         canvas.width = width;         canvas.height = height;         ctx = canvas.getcontext('2d');          // create particles         circles = [];         for(var x = 0; x < width*0.2; x++) {             var c = new circle();             circles.push(c);         }         animate();     }      // event handling     function addlisteners() {         window.addeventlistener('scroll', scrollcheck);         window.addeventlistener('resize', resize);     }      function scrollcheck() {         if(document.body.scrolltop > height) animateheader = false;         else animateheader = true;     }      function resize() {         width = window.innerwidth;         height = window.innerheight;         largeheader.style.height = height+'px';         canvas.width = width;         canvas.height = height;     }      function animate() {         if(animateheader) {             ctx.clearrect(0,0,width,height);             for(var in circles) {                 circles[i].draw();             }         }         requestanimationframe(animate);     }      // canvas manipulation     function circle() {         var _this = this;          // constructor         (function() {             _this.pos = {};             init();             console.log(_this);         })();          function init() {             _this.pos.x = math.random()*width;             _this.pos.y =-50;             _this.alpha = 0.1+math.random()*0.9;             _this.scale = 0.1+math.random()*1;             _this.velocity = math.random();         }          this.draw = function() {             if(_this.alpha <= 0) {                 init();             }             _this.pos.y -= -_this.velocity;             _this.alpha -= 0.0005;             ctx.beginpath();             ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * math.pi, false);             ctx.fillstyle = 'rgba(16,239,173,'+ _this.alpha+')';             ctx.fill();         };     } })();

you can create array 4 colors , choose random 1 @ creation of each circle.

here code circle function:

function circle() {   var _this = this;    // constructor   (function() {     _this.pos = {};     init();     console.log(_this);   })();    function init() {     _this.pos.x = math.random()*width;     _this.pos.y =-50;     _this.alpha = 0.1+math.random()*0.9;     _this.scale = 0.1+math.random()*1;     _this.velocity = math.random();      var colors = [[0,206,102], [227, 191, 55], [204,85,67], [161,183, 194]];     var random_index = math.floor(0 + (math.random() * ((3 + 1) - 0)));     _this.color = colors[random_index];   }    this.draw = function() {     if(_this.alpha <= 0) {       init();     }     _this.pos.y -= -_this.velocity;     _this.alpha -= 0.0005;     ctx.beginpath();     ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * math.pi, false);      var c = _this.color;     ctx.fillstyle = 'rgba('+c[0]+','+c[1]+','+c[2]+','+ _this.alpha+')';     ctx.fill();   }; }

Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more