欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript+canvas實現刮刮卡抽獎效果

 更新時間:2015年07月29日 08:50:31   投稿:hebedich  
這篇文章主要介紹了javascript+canvas實現刮刮卡抽獎效果的相關資料,需要的朋友可以參考下

運用canvas做的簡單刮刮卡效果,每次刷新可重新測試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;} 
 
.cjbox{ margin:100px; height:80px; width:200px; background:#FFF; position:relative;}
#canvas{position:absolute; left:0px; top:0px;z-index:99;}
.sjmes{ position:absolute; left:0px; top:0px; height:80px; width:200px; text-align:center; font-size:40px; line-height:80px; z-index:9;}
</style>
<title>demo1</title>
</head>
<body> 
 
<div style="position:relative; margin:20px 100px; background:#0CF; height:400px; width:500px; margin:0 auto;">
  <div>刮刮卡簡單抽獎</div>
  <div class="cjbox">
    <div class="sjmes" id="sjmes"></div>
    <canvas width=200 height=80 id="canvas"></canvas> 
  </div>
</div> 
 
</body>
<script type="text/javascript">
//init 
var cjcon=["一等獎","二等獎","三等獎","謝謝參與"];//獎項設置
var cjper=[3,10,20,100];//獎項率,次數
/*
 * sjmes
 * @Author 透筆度(1530341234@qq.com)          
 * @param {cjcon}   所有獎項   
 */
var percjcon=[];
for(var i=0;i<cjper.length;i++){
  peic(cjper[i],i);
};
function peic(len,ind){
  for(var i=0;i<len;i++){
    percjcon.push(cjcon[ind]);
  }; 
};
var sjmes = document.getElementById("sjmes");
var numrandom=Math.floor(Math.random()*percjcon.length);
sjmes.innerHTML=percjcon[numrandom];
 
var opacityb=0.5;//透明百分比,參考值,什么程度出現提示
var backcolorb="#ffaaaa";
var numl=200*80;//總像素個數
var nump;//出現backcolorb的個數
var opacitya;//透明百分比實際值
 
var canvas = document.getElementById("canvas"); //獲取canvas  
var context = canvas.getContext('2d'); //canvas追加2d畫圖
var flag = 0; //標志,判斷是按下后移動還是未按下移動 重要
var penwidth=20; //畫筆寬度
context.fillStyle="#faa"; //填充的顏色
context.fillRect(0,0,200,80); //填充顏色 x y坐標 寬 高
 
canvas.addEventListener('mousemove', onMouseMove, false); //鼠標移動事件 
canvas.addEventListener('mousedown', onMouseDown, false); //鼠標按下事件 
canvas.addEventListener('mouseup', onMouseUp, false); //鼠標抬起事件 
var movex=-1;
var movey=-1;
var imgData;//imagedada容器
var rgbabox=[];//存放讀取后的rgba數據;
function onMouseMove(evt) {
  if (flag == 1) { 
    movex=evt.layerX;
    movey=evt.layerY;    
    context.fillStyle="#FF0000";
    context.beginPath();
    context.globalCompositeOperation="destination-out";
    context.arc(movex,movey,penwidth,0,Math.PI*2,true); //Math.PI*2是JS計算方法,是圓    
    context.closePath();
    context.fill();
  } 
} 
function onMouseDown(evt) { 
 flag = 1; //標志按下
} 
function onMouseUp(evt) { 
  flag = 0;
  //讀取像素數據
  imgData=context.getImageData(0,0,200,80);//獲取當前畫布數據
  //imgData.data.length 獲取圖片數據總長度,沒4個為一組存放rgba
  for(var i=0; i<imgData.data.length;i+=4){
    var rval=imgData.data[i];
    var gval=imgData.data[i+1];
    var bval=imgData.data[i+2];
    var aval=imgData.data[i+3];
    var rgbaval=rval+"-"+gval+"-"+bval+"-"+aval;
    rgbabox.push(rgbaval);
  }
  //end
  for(var j=0;j<rgbabox.length;j++){
    //alert(rgbabox[j].split("-")[0])
    rgbabox[j]='#'+rgbToHex(rgbabox[j].split("-")[0],rgbabox[j].split("-")[1],rgbabox[j].split("-")[2]);    
  }
  nump=countSubstr(rgbabox.join(","),backcolorb,true);
  opacitya=(numl-nump)/numl;
  if(opacitya>opacityb){
    alert("恭喜你獲得"+percjcon[numrandom])
  }else{}
 
} 
function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }//rgb轉為16進制 #xxx形式
function countSubstr(str,substr,isIgnore){//計算字符串出現子字符串的個數
  var count;
  var reg="";
  if(isIgnore==true){
  reg="/"+substr+"/gi"; 
  }else{
  reg="/"+substr+"/g";
  }
  reg=eval(reg);
  if(str.match(reg)==null){
  count=0;
  }else{
  count=str.match(reg).length;
  }
  return count;
}
//end
</script>
</html>

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關文章

  • JS?中數組的增刪改查和對象的增刪改查實例詳解

    JS?中數組的增刪改查和對象的增刪改查實例詳解

    這篇文章主要介紹了JS?中數組的增刪改查和對象的增刪改查實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • 微信小程序實現聊天室

    微信小程序實現聊天室

    這篇文章主要為大家詳細介紹了微信小程序實現聊天室,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • 一定有你會用到的JavaScript一行代碼實用技巧總結

    一定有你會用到的JavaScript一行代碼實用技巧總結

    這篇文章主要為大家介紹了一定有你會用到的JavaScript一行代碼總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • 微信小程序實現的繪制table表格功能示例

    微信小程序實現的繪制table表格功能示例

    這篇文章主要介紹了微信小程序實現的繪制table表格功能,涉及微信小程序數據讀取及界面布局相關操作技巧,需要的朋友可以參考下
    2019-04-04
  • JS Ajax請求會話過期處理問題解決方法分析

    JS Ajax請求會話過期處理問題解決方法分析

    這篇文章主要介紹了JS Ajax請求會話過期處理問題解決方法,結合實例形式簡單分析了ajax請求會話過期處理的相關原理、解決方法及操作注意事項,需要的朋友可以參考下
    2019-11-11
  • JavaScript浮點數及運算精度調整詳解

    JavaScript浮點數及運算精度調整詳解

    浮點數的精度問題不是JavaScript特有的,本文主要介紹了JavaScript浮點數及運算精度調整詳解,有需要的朋友可以了解一下。
    2016-10-10
  • js getBoundingClientRect使用方法詳解

    js getBoundingClientRect使用方法詳解

    這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • mvc 、bootstrap 結合分布式圖簡單實現分頁

    mvc 、bootstrap 結合分布式圖簡單實現分頁

    這篇文章主要介紹了mvc 、bootstrap 結合分布式圖簡單實現分頁的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-10-10
  • layer插件select選中默認值的方法

    layer插件select選中默認值的方法

    今天小編就為大家分享一篇layer插件select選中默認值的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • js 靜態(tài)HTML表格排序功能實現

    js 靜態(tài)HTML表格排序功能實現

    對于對于一些表格按價格 等進行排序,方便用戶對當前頁面的高低價格排序,用戶體驗性好
    2009-02-02

最新評論