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);
}