Random dots: randoms dots generated with moving mouse.
Idea:
Generate random number of various dots when mouse moving around the browser.
Feature:
– Canvas size dynamically fits the window;
– The color of the dots is generated randomly;
– The size of the dots is randomly assigner within a range;
– Multi-users are allowed to play synchronically.
Development:
1. no circle dots instead of the color patches with various shape are generated
– Solved:
before:
context.arc(evt.x, evt.y, circleRadius, 0, 0);context.arc(x-coordinate of center, y-coordinate of center, radius, start angle, end angle);
To obtain a circle, the start angle should be 0 and end angle should be 360degree, which is 2PI in polar coordinate.
after:
context.arc(evt.x, evt.y, circleRadius, 0, 2 * Math.PI);
2. all generated dots line to the startpoint
With the help of https://www.w3schools.com/tags/canvas_closepath.asp, I know how to solve this problem.
– Solved:
Note: If the path is not closed, the fill() method will add a line from the last point to the startpoint of the path to close the path (like closePath() ), and then fill the path.
Code:
Check out my code here!