canvas學習筆記03：簡單脈衝效果

時間 2019-11-13

標籤 canvas 學習筆記簡單脈衝效果简体版

原文原文鏈接

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <canvas id="c" width="1000" height="600"></canvas> <script> (function (w) { w['raf'] = w['requestAnimationFrame'] || w['webkit'+r] || w['moz'+r] || w['ms'+r] || w['o'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; function Fx (size,color,cxt){ this.size = size; this.color = color; this.cxt = cxt; this.angle = 0; this.speed = 0.09; this.run(); }; Fx.prototype = { 'run' : function (){ var that = this, c = this.cxt, size = this.size + Math.abs(Math.sin(this.angle))*this.size , txt = '♥' , r = 5/3; c.clearRect(0,0,1000,600); c.save(); c.beginPath(); c.font= size+'px Georgia'; c.fillStyle = this.color; c.fillText(txt,500 - c.measureText(txt).width/2,300 ); c.fill(); c.restore(); this.angle += this.speed; raf(function (){ that.run.call(that);}); } }; w['Fx'] = Fx; }(window)); new Fx(50,'red',document.getElementById('c').getContext('2d')); </script> </body> </html> html

web

相關標籤/搜索