canvas实现转盘抽奖：
var arr = [{id:1,text:'10元话费',img_url:'images/a.png'},{ id:2,text:'20元话费',img_url:'images/2.png'},{ id:3,text:'30比特币',img_url:'images/3.png'},{ id:4,text:'40比特币',img_url:'images/4.png'},{ id:5,text:'50比特币',img_url:'images/5.png'},{ id:6, text:'60比特币',img_url:'images/6.png'},{ id:7,text:'70比特币', img_url:'images/7.png'},{ id:8,text:'80比特币',img_url:'images/7.png'}] var $deg = 0; var earlyIndex = 0; //上次随机选择的数字 var currIndex = 0; //当前随机选择的数字 var isAnimate = false; //当前是否还在旋转 var rotateAngel = 360/arr.length; //旋转的角度 document.getElementById("start").onclick = function(){ if(!isAnimate){ document.getElementById("start").style.cursor = "not-allowed" isAnimate = true; var angleRotation = 0; var cnavas = document.getElementById("canvas"); var ranmodNum = (Math.round(Math.random()*7)+1); currIndex = ranmodNum; angleRotation = (ranmodNum-earlyIndex)*rotateAngel; $deg = $deg%rotateAngel==0?($deg + 1080 - angleRotation + rotateAngel/2):($deg = $deg + 1080 -angleRotation); cnavas.style.cssText = "transform: rotate("+$deg+"deg);transition: all 3s;" setTimeout(function(){ document.getElementById("start").style.cursor = "pointer" earlyIndex = currIndex; isAnimate = false; document.getElementById('winData').innerText = arr[ranmodNum-1].text; },3000); } } var $canvas = document.getElementById("canvas"); var ctx = $canvas.getContext("2d"); var $width = parseInt(document.documentElement.clientWidth*0.9); $canvas.width = $width; $canvas.height = $width; var $param = { w : $width, h : $width, r : $width/2, num : arr.length } console.log("当前屏幕的宽度----"+JSON.stringify($param)); var ctx = $this.el().getContext("2d"); // 外圆 ctx.beginPath(); ctx.lineWidth = $param.r*0.13; ctx.strokeStyle = "#df1e15"; ctx.arc($param.r,$param.r,$param.r*0.9,0,2*Math.PI,false); ctx.stroke(); ctx.closePath(); //内圆 ctx.beginPath(); ctx.lineWidth = $param.r*0.13; ctx.strokeStyle = "#f4ad26"; ctx.arc($param.r,$param.r,$param.r*0.76,0,2*Math.PI,false); ctx.stroke(); ctx.closePath(); // // 12个小圆 for (var i = 0; i < 12; i++) { ctx.save(); ctx.beginPath(); ctx.fillStyle = i%2==0?"#fbb936":"#fbf0a9"; ctx.shadowColor = "#ddd"; ctx.shadowBlur = 10; ctx.translate($param.r, $param.r); ctx.rotate(30 * i * Math.PI / 180); ctx.arc($param.r*0.6,$param.r*0.6,10,0,2*Math.PI,false); ctx.fill(); ctx.closePath(); ctx.restore(); } var sector = 8; // 12份扇形 for (var j = 0; j < $param.num; j++) { ctx.save(); ctx.beginPath(); ctx.fillStyle = j%2==0?"#fbb936":"#fbf0a9"; ctx.moveTo($param.r,$param.r); ctx.arc($param.r,$param.r,$param.r*0.7,360/sector * j * Math.PI / 180,360/sector * (j+1) * Math.PI / 180,false); ctx.fill(); ctx.closePath(); ctx.restore(); } var angel = (2 * Math.PI / 360) * (360 / $param.num); var startAngel = angel / 2 var awardPic = []; function loadImg(callback){ var count = 0; for (var m = 0; m < $param.num; m++) { var img = new Image(); img.src=arr[m].img_url; awardPic.push(img); img.onload = function(){ callback(); } } } function drawImg(){ var angel = (2 * Math.PI / 360) * (360 / $param.num); var startAngel = angel / 2 for (var n = 0; n < $param.num; n++) { ctx.save(); ctx.beginPath(); ctx.translate($param.r,$param.r); ctx.rotate(startAngel); // ctx.rotate(startAngel); ctx.drawImage(awardPic[n],-$param.r*0.15,-$param.r*0.58,$param.r*0.3,$param.r*0.25); startAngel += angel; ctx.closePath(); ctx.restore(); } } loadImg(drawImg); for (var k = 0; k < $param.num; k++) { ctx.save(); ctx.translate($param.r,$param.r); // ctx.drawImage(img, -28, -120); ctx.rotate(startAngel) ctx.font = "0.8rem 微软雅黑"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(arr[k].text, 0, -$param.r*0.6); startAngel += angel ctx.restore(); }刮刮乐：
view布局：
<div class="box"> <img src="images/a.png" alt="" width="120"> <canvas id="canvas"></canvas> </div>js实现：
(function(){ // 事件绑定 window.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) { // elem:节点 type:事件类型 handler:事件处理函数 // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意：ie没有这个参数 elem.addEventListener(type, handler, false); } } else if (window.attachEvent) {// IE浏览器 return function(elem, type, handler) { elem.attachEvent("on" + type, handler); } } }()); // 事件解除 window.removeHandler = (function() { if (window.removeEventListener) { // 标准浏览器 return function(elem, type, handler) { elem.removeEventListener(type, handler, false); } } else if (window.detachEvent) {// IE浏览器 return function(elem, type, handler) { elem.detachEvent("on" + type, handler); } } }()); }()); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var brush=function(){//刮奖 context.clearRect(event.offsetX,event.offsetY,20,20); }; context.fillStyle='#A9AB9D'; context.fillRect(0,0,300,180); context.fillStyle='#000'; context.font='50px Arial'; context.fillText('刮奖区',75,115); //2. 为canvas元素onmousedown和onmouseup事件 canvas.onmousedown = function(){ // 鼠标按下时 - 绑定鼠标跟随事件 bindHandler(canvas,'mousemove',brush,false); } canvas.onmouseup = function(){ // 停止刮奖功能 - 解绑鼠标跟随事件 removeHandler(canvas,"mousemove",brush,false); }