Canvas achieves text particle, and rotates (perfect) around the axis, canvas Particle
1. An initial version was released before, but there was a big flaw in the rotation, resulting in a similar impact after each point was moved to the endpoint.
2. Therefore, this article made some adjustments to the rotation, using circular motion similar to the horizontal direction
A. HTML code that defines the canvas tag
<!DOCTYPE html>B. js code to realize the process of converting text to particles and then moving
Var canvas, ctx; canvas = document. getElementById ("participant"); ctx = canvas. getContext ("2d"); canvas. width = 230; canvas. height = 230; var dots = []; var Dividingline = 110; function init () {xiezi (); var imgData = ctx. getImageData (0, 0, canvas. width, canvas. height); ctx. clearRect (0, 0, canvas. width, canvas. height); for (var y = 0; y = 228) {// because of img. data contains the rgba of each pixel. + 3 indicates that the value of a is dot. x = x; dot. y = y; dots. push (dot); // Add each xy that meets the conditions to the dots array} fengexian (); // run () ;}} function xiezi () {ctx. beginPath (); ctx. font = "50px Comic Sans MS"; ctx. fillText ("SoDiSnI", 20,100); ctx. fill ();} function drawparticipant () {for (var I = 0; I <dots. length; I ++) {var particle = dots [I]; ctx. beginPath (); ctx. arc (particle. x, particle. y, 1, 0, Math. PI * 2, true); ctx. fill () ;}} function fengexian () {ctx. beginPath (); ctx. moveTo (Dividingline, 0); ctx. lineTo (Dividingline, 230); ctx. stroke () ;}var hudu = 0; function run () {// uses the radians to extract the x coordinates of the circular motion, however, the y coordinate remains unchanged. // the corresponding plane looks as if the motion is slow as it is approaching the endpoint, And if (hudu <360) is faster near the midline) {for (var I = 0; I <dots. length; I ++) {var particle = dots [I]; var newx = Math. cos (hudu) * (Dividingline-particle. x) + Dividingline; ctx. beginPath (); ctx. arc (newx, particle. y, 1, 0, Math. PI * 2, true); ctx. fill () ;}hudu + = 0.1; // refine the radians to ensure a small gap in the horizontal motion} else {hudu = 0 ;}} function clean () {ctx. clearRect (0, 0, canvas. width, canvas. height) ;}setinterval (function () {clean (); run () ;}, 50); init ();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
