HTML5技术

Canvas实现文字粒子化,并且绕轴旋转(完善) - 洛雨寒殇

字号+ 作者:H5之家 来源:博客园 2015-09-24 10:14 我要评论( )

1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉。 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义canvas标签 b. js代码,实现文字转粒子,再进行运动的过程 v

1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉。

2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动

a. HTML代码,定义canvas标签

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); (i = (x + y * imgData.width) * 4;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; (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();

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • 调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注 - QISHUANG

    调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加

    2017-04-18 10:02

  • canvas知识点 - H.U.C-王子

    canvas知识点 - H.U.C-王子

    2017-04-16 10:02

  • 计算机网络——DNS协议的学习与实现 - 学数学的程序猿

    计算机网络——DNS协议的学习与实现 - 学数学的程序猿

    2017-04-16 10:00

网友点评
c