canvas教程

Canvas骰子,

字号+ 作者:H5之家 来源:H5之家 2017-08-30 13:05 我要评论( )

Canvas骰子,。Canvas骰子, var csns=document.getElementById(

Canvas骰子,
var csns=document.getElementById("csns"); var tcx=csns.getContext("2d"); csns.style.border="1px red solid"; tcx.strokeStyle="#1296DB" tcx.beginPath(); tcx.moveTo(95,50); tcx.lineTo(170,50); tcx.arcTo(190,50,190,70,15); tcx.lineTo(190,140); tcx.arcTo(190,160,170,160,15); tcx.lineTo(100,160); tcx.arcTo(80,160,80,140,15); tcx.lineTo(80,70); tcx.arcTo(80,50,100,50,15); tcx.stroke(); var s=0; var createpoint=setInterval(function () { tcx.clearRect(90,60,90,90); s++;if(s==7)s=0; tcx.fillStyle="#1296DB" switch(s){ case 1: tcx.beginPath(); tcx.arc(135,105,20,0,2*Math.PI); tcx.fill(); break; case 2: tcx.beginPath(); tcx.arc(112,105,10,0,2*Math.PI); tcx.fill(); tcx.beginPath(); tcx.arc(158,105,10,0,2*Math.PI); tcx.fill(); break; case 3: var x=85, y=55; for(var i=0;i<s;i++){ tcx.beginPath(); x+=25; y+=25; tcx.arc(x,y,10,0,2*Math.PI); tcx.fill(); } break; case 4: case 5: var x=110,y=30; for(var i=0;i<s;i++){ tcx.beginPath(); if(i>1){ x=160; } if(i==2){ y=30;} y+=50; if(s==5) { if (i == 4) { x -= 25; y -= 75 } } tcx.arc(x, y, 10, 0, 2 * Math.PI); tcx.fill(); } break; case 6: var x=0,y=55; for(var i=0;i<s;i++){ tcx.beginPath(); if(i>2){ x=110; }else{ x=160 } if(i==3){ y=55;} y+=25; tcx.arc(x,y,10,0,2*Math.PI); tcx.fill(); }; break; } },200);

 

 

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

相关文章
  • [教学视频]canvas黑板效果

    [教学视频]canvas黑板效果

    2017-08-30 14:02

  • 5. 导航 MARI 画布(5. Navigating the MARI canvas)

    5. 导航 MARI 画布(5. Navigating the MARI canvas)

    2017-08-29 17:00

  • [教学视频]Canvas动画和手机游戏开发

    [教学视频]Canvas动画和手机游戏开发

    2017-08-29 16:01

  • 尖端数字技术助力安永审计

    尖端数字技术助力安永审计

    2017-08-29 14:04

网友点评