经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
canvas绘制刮刮卡效果
来源:jb51  时间:2021/3/8 11:18:20  对本文有异议

本文实例为大家分享了canvas绘制刮刮卡效果的具体代码,供大家参考,具体内容如下

先上图

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="keywords" content="风舞红枫,前端技术,canvas"/>
  5. <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
  6. <meta charset="utf-8">
  7. <title>刮刮卡</title>
  8. <link rel="icon" href="../image/icon2.ico" >
  9. <style type="text/css">
  10. *{margin:0;padding:0;}
  11. html,body{height:100%;}
  12. body{overflow: hidden;}
  13. div{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:150px;text-align:center;line-height:150px;background:rgb(200,0,0);color:rgb(255,255,255);font-size:22px;}
  14. canvas{display: block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;filter:blur(0.7px);}
  15. </style>
  16. </head>
  17. <body>
  18. <div></div>
  19. <canvas></canvas>
  20. </body>
  21. <script type="text/javascript">
  22. var div = document.getElementsByTagName('div')[0];
  23. var canvas = document.getElementsByTagName('canvas')[0];
  24. var context = canvas.getContext("2d");
  25.  
  26. var Jackpots = ["一等奖","二等奖","三等奖","四等奖","奖励奖"];
  27. //一等奖概率2% 二等奖概率6% 三等奖概率14% 四等奖概率30% 奖励奖概率48%
  28. var Jackpot = rand(0,49);
  29. if(Jackpot == 0){
  30. div.innerHTML = Jackpots[0];
  31. }else if(Jackpot>0 && Jackpot<4){
  32. div.innerHTML = Jackpots[1];
  33. }else if(Jackpot>3 && Jackpot<11){
  34. div.innerHTML = Jackpots[2];
  35. }else if(Jackpot>10 && Jackpot<26){
  36. div.innerHTML = Jackpots[3];
  37. }else{
  38. div.innerHTML = Jackpots[4];
  39. }
  40.  
  41. context.beginPath();
  42. context.fillStyle = "rgb(200,200,200)"
  43. context.moveTo(0,0);
  44. context.lineTo(300,0);
  45. context.lineTo(300,150);
  46. context.lineTo(0,150);
  47. context.lineTo(0,0);
  48. context.fill();
  49. context.closePath();
  50.  
  51. context.beginPath();
  52. context.font = '30px Arial';
  53. context.fillStyle = "rgb(255,255,255)"
  54. context.fillText("刮刮卡", 110 , 90);
  55. context.fill();
  56. context.closePath();
  57. var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"];
  58. for(var i = 0;i<50;i++){
  59. context.beginPath();
  60. context.fillStyle = fillColor[rand(0,3)];
  61. context.arc(rand(20,280),rand(20,130),1,0,2*Math.PI);
  62. context.fill();
  63. context.closePath();
  64. }
  65.  
  66. var flag = false;
  67. canvas.onmousedown = function(){
  68. flag = true;
  69. }
  70.  
  71. canvas.onmouseup = function(){
  72. flag = false;
  73. }
  74.  
  75. canvas.onmousemove = function(){
  76. if(flag){
  77. var e = event || window.event;
  78. var x = e.clientX - parseInt(div.offsetLeft);
  79. var y = e.clientY - parseInt(div.offsetTop);
  80. //console.log(x,y);
  81.  
  82. context.beginPath();
  83. context.arc(x,y,20,0,2*Math.PI);
  84. context.globalCompositeOperation="destination-out";
  85. context.fill();
  86. context.closePath();
  87. }
  88. }
  89.  
  90. //随机n到m的一个整数
  91. function rand(n,m){
  92. var c = m - n + 1;
  93. return Math.floor(Math.random() * c + n);
  94. }
  95. </script>
  96. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号