canvas教程

基于HTML5 canvas的简单抽奖转盘

字号+ 作者:H5之家 来源:H5之家 2016-06-06 14:00 我要评论( )

摘要: 这是一款非常简单的基于HTML5 canvas的抽奖转盘特效。该抽奖转盘中的所有元素都使用canvas代码来生成,可以设置转盘的旋转速...

indow.onload=function() { for ( var i = 0; i < 10; i++) { color.push(getColor()); } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.translate(250,250); createArrow(context); init(context); document.getElementById("btn").onclick=function(){ if(t){ return false; } var step = beginAngle +Math.random()*10; var angle = 0; t = setInterval(function(){ step *=radio; if(step <= 0.1){ clearInterval(t); t =null; var pos = Math.ceil(angle / 36); var res = info[10-pos]; context.save(); context.beginPath(); context.font="23px 微软雅黑"; context.fillStyle="#f00"; context.textAlign="center"; context.textBaseline="middle"; context.fillText(res,0,0); context.restore(); }else{ context.clearRect(-250,-250,500,500); angle+=step; if(angle > 360){ angle -=360; } context.save(); context.beginPath(); context.rotate(angle * Math.PI/180); init(context); context.restore(); createArrow(context); } },60); }; };

 

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

相关文章
  • 可创建gooey效果抖动窗口的jquery插件

    可创建gooey效果抖动窗口的jquery插件

    2017-04-15 10:00

  • HTML5资料by html5zhijia.com

    HTML5资料by html5zhijia.com

    2017-04-10 12:07

  • HTML5 canvas水波纹动画特效

    HTML5 canvas水波纹动画特效

    2017-04-06 12:01

  • 可生成指定图案的js二维码插件

    可生成指定图案的js二维码插件

    2017-02-26 18:00

网友点评
n