Canvas实现文字粒子化，并且绕轴旋转（完善）
生活随笔
收集整理的這篇文章主要介紹了
Canvas实现文字粒子化，并且绕轴旋转（完善）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 之前有放過一個初始版本，但是因為在旋轉的時候，有比較大的瑕疵，造成每個點運動到端點后，出現類似撞擊的感覺。
2. 所以本文對旋轉作了些調整，運用類似水平方向的圓周運動
a. HTML代碼，定義canvas標簽
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body><canvas id="particles"></canvas><script type="text/javascript" src="particle-main.js"></script> </body> </html>b. js代碼，實現文字轉粒子，再進行運動的過程
var canvas, ctx; canvas = document.getElementById("particles"); 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 < imgData.height; y += 3) {//y+=3，是因為如果按像素取，有效值非常多，所以這里就每隔3像素取一點for (var x = 0; x < imgData.width; x += 3) {//y是高，x是寬var i = (x + y * imgData.width) * 4;//這邊就從左往右，從上往下；500X300的大小，會取166×100個像素點；×4則是因為rgba()var dot = {x: 0,y: 0};if (imgData.data[i + 3] >= 228) {//因為img.data中包含了每個像素點的rgba，＋3表示取a的值dot.x = x;dot.y = y;dots.push(dot);//將每個滿足條件的xy Add到dots數組中 }}fengexian();//run(); } }function xiezi() {ctx.beginPath();ctx.font = "50px Comic Sans MS";ctx.fillText("SoDiSnI", 20, 100);ctx.fill(); } function drawparticles() {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() {//主要利用弧度的特性,截取圓周運動的x坐標,可以理解為按圓周運動,但是y坐標不變,//相對應的在平面上看起來,快到端點的時候運動慢,在中線附近就較快if (hudu < 360) {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;//細化弧度,可以保證橫坐標運動的間距小 }else {hudu = 0;} } function clean() {ctx.clearRect(0, 0, canvas.width, canvas.height); } setInterval(function () {clean();run(); }, 50);init();?
轉載于:https://www.cnblogs.com/lm1107/p/4809656.html
總結
以上是生活随笔為你收集整理的Canvas实现文字粒子化，并且绕轴旋转（完善）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 1010 Tempter of
- 下一篇： protected private pu