canvas -方形抽奖
来源：互联网 发布：淘宝商品资质图片 编辑：程序博客网 时间：2024/06/10 03:15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航菜单</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
canvas {
position: absolute;
}
</style>
</head>
<style type="text/css">
.d {}
.d:after {}
</style>
<body>
<div id="canvas" style="position: relative;">
</div>
</body>
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
var self = this;
self.list = [{
name: "一等奖"
}, {
name: "二等奖"
}, {
name: "三等奖"
}, {
name: "四等奖"
}, {
name: "五等奖"
}, {
name: "六等奖"
}, {
name: "七等奖"
}, {
name: "八等奖"
}, {
name: "九等奖"
}, {
name: "十等奖"
}, {
name: "十一等奖"
}, {
name: "十二等奖"
}];
self.index = 0;
self.round = 0;
self.seep = 500;
self.random = 0;
self.btcolor = "#DC220D";
var screenWidth = window.screen.width,
screenHeight = window.screen.height;
$("#canvas").html(' <canvas width="' + screenWidth + '" height="' + screenHeight + '" id="myCanvas">浏览器不支持canvas</canvas>');
self.canvas = document.getElementById("myCanvas");
self.ctx = self.canvas.getContext("2d");
var x;
var y;
var rectWidth = (screenWidth - 30) / 4;
var color = "red";
function getEventPosition(ev) {
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {
x: x,
y: y
};
}
for (var i = 0; i < 12; i++) {
if (i % 3 == 0) {
color = "red";
} else if (i % 3 == 1) {
color = "yellow";
} else {
color = "blue";
}
if (i < 4) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth, screenWidth / 2 - rectWidth * 2, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.55);
} else if (i < 7 && i >= 4) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth + rectWidth * 0.55);
} else if (i >= 7 && i < 10) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth, screenWidth / 2 + rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 + rectWidth + rectWidth * 0.55);
} else if (i >= 10 && i < 12) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.25, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth + rectWidth * 0.55);
}
}
self.ctx.beginPath();
self.ctx.fillStyle = "#DC220D";
self.ctx.globalAlpha = 1;
self.ctx.rect(screenWidth / 2 - rectWidth, screenWidth / 2 - rectWidth, rectWidth * 2, rectWidth * 2);
self.ctx.fill();
/* self.ctx.isPointInPath(screenWidth / 2 - rectWidth, screenWidth / 2 - rectWidth);*/
self.ctx.save();
self.ctx.restore();
//抽奖按钮
self.ctx.font = "30px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText("开始抽奖", screenWidth / 2 - rectWidth + rectWidth * 0.2, screenWidth / 2 - rectWidth + rectWidth * 0.55 * 2);
self.canvas.addEventListener("click", function(e) {
var p = getEventPosition(e);
if (self.ctx.isPointInPath(p.x, p.y)) {
if (self.btcolor === "#ccc") {
return;
} else {
self.random = parseInt(Math.random() * 11, 10) + 1;
self.btcolor = "#ccc";
draw(self);
}
}
});
function draw(self) {
if (self.index >= 12) {
self.index = 0;
self.round++;
}
if (self.round < 4) {
self.seep = 500 - 120 * self.round
} else if (self.round >= 4 && self.round < 10) {
self.seep = 20;
} else if (self.round >= 10 && self.round <= 15) {
self.seep = 20 + (self.round - 10) * 80;
if (self.index >= (self.random) && self.round == 15) {
self.round++;
alert("恭喜你中奖了" + self.list[self.random - 1].name);
}
if (self.index == (self.random - 1) && self.round == 15) {
self.btcolor = "#DC220D";
}
}
if (self.round >= 16) {
clearTimeout(self.seep);
self.index = 0;
self.round = 0;
self.seep = 500;
self.random = 0;
return;
}
self.ctx.clearRect(0, 0, screenWidth, screenHeight);
for (var i = 0; i < 12; i++) {
/*if (i >= (self.random + 1) && self.round == 15) {
break;
}*/
if (i % 3 == 0) {
color = "red";
} else if (i % 3 == 1) {
color = "yellow";
} else {
color = "blue";
}
if (i < 4) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth, screenWidth / 2 - rectWidth * 2, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.55);
} else if (i < 7 && i >= 4) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth + rectWidth * 0.55);
} else if (i >= 7 && i < 10) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth, screenWidth / 2 + rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 + rectWidth + rectWidth * 0.55);
} else if (i >= 10 && i < 12) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.25, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth + rectWidth * 0.55);
}
}
self.ctx.beginPath();
self.ctx.fillStyle = self.btcolor;
self.ctx.globalAlpha = 1;
self.ctx.rect(screenWidth / 2 - rectWidth, screenWidth / 2 - rectWidth, rectWidth * 2, rectWidth * 2);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//抽奖按钮
self.ctx.font = "30px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText("开始抽奖", screenWidth / 2 - rectWidth + rectWidth * 0.2, screenWidth / 2 - rectWidth + rectWidth * 0.55 * 2);
console.log("round:" + self.round + ",index:" + self.index + ",seep:" + self.seep + ",random:" + self.random);
self.index++;
self.seep = setTimeout(function() {
draw(self);
}, self.seep);
}
});
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航菜单</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
canvas {
position: absolute;
}
</style>
</head>
<style type="text/css">
.d {}
.d:after {}
</style>
<body>
<div id="canvas" style="position: relative;">
</div>
</body>
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
var self = this;
self.list = [{
name: "一等奖"
}, {
name: "二等奖"
}, {
name: "三等奖"
}, {
name: "四等奖"
}, {
name: "五等奖"
}, {
name: "六等奖"
}, {
name: "七等奖"
}, {
name: "八等奖"
}, {
name: "九等奖"
}, {
name: "十等奖"
}, {
name: "十一等奖"
}, {
name: "十二等奖"
}];
self.index = 0;
self.round = 0;
self.seep = 500;
self.random = 0;
self.btcolor = "#DC220D";
var screenWidth = window.screen.width,
screenHeight = window.screen.height;
$("#canvas").html(' <canvas width="' + screenWidth + '" height="' + screenHeight + '" id="myCanvas">浏览器不支持canvas</canvas>');
self.canvas = document.getElementById("myCanvas");
self.ctx = self.canvas.getContext("2d");
var x;
var y;
var rectWidth = (screenWidth - 30) / 4;
var color = "red";
function getEventPosition(ev) {
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {
x: x,
y: y
};
}
for (var i = 0; i < 12; i++) {
if (i % 3 == 0) {
color = "red";
} else if (i % 3 == 1) {
color = "yellow";
} else {
color = "blue";
}
if (i < 4) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth, screenWidth / 2 - rectWidth * 2, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.55);
} else if (i < 7 && i >= 4) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth + rectWidth * 0.55);
} else if (i >= 7 && i < 10) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth, screenWidth / 2 + rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 + rectWidth + rectWidth * 0.55);
} else if (i >= 10 && i < 12) {
self.ctx.beginPath();
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 0.4;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.25, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth + rectWidth * 0.55);
}
}
self.ctx.beginPath();
self.ctx.fillStyle = "#DC220D";
self.ctx.globalAlpha = 1;
self.ctx.rect(screenWidth / 2 - rectWidth, screenWidth / 2 - rectWidth, rectWidth * 2, rectWidth * 2);
self.ctx.fill();
/* self.ctx.isPointInPath(screenWidth / 2 - rectWidth, screenWidth / 2 - rectWidth);*/
self.ctx.save();
self.ctx.restore();
//抽奖按钮
self.ctx.font = "30px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText("开始抽奖", screenWidth / 2 - rectWidth + rectWidth * 0.2, screenWidth / 2 - rectWidth + rectWidth * 0.55 * 2);
self.canvas.addEventListener("click", function(e) {
var p = getEventPosition(e);
if (self.ctx.isPointInPath(p.x, p.y)) {
if (self.btcolor === "#ccc") {
return;
} else {
self.random = parseInt(Math.random() * 11, 10) + 1;
self.btcolor = "#ccc";
draw(self);
}
}
});
function draw(self) {
if (self.index >= 12) {
self.index = 0;
self.round++;
}
if (self.round < 4) {
self.seep = 500 - 120 * self.round
} else if (self.round >= 4 && self.round < 10) {
self.seep = 20;
} else if (self.round >= 10 && self.round <= 15) {
self.seep = 20 + (self.round - 10) * 80;
if (self.index >= (self.random) && self.round == 15) {
self.round++;
alert("恭喜你中奖了" + self.list[self.random - 1].name);
}
if (self.index == (self.random - 1) && self.round == 15) {
self.btcolor = "#DC220D";
}
}
if (self.round >= 16) {
clearTimeout(self.seep);
self.index = 0;
self.round = 0;
self.seep = 500;
self.random = 0;
return;
}
self.ctx.clearRect(0, 0, screenWidth, screenHeight);
for (var i = 0; i < 12; i++) {
/*if (i >= (self.random + 1) && self.round == 15) {
break;
}*/
if (i % 3 == 0) {
color = "red";
} else if (i % 3 == 1) {
color = "yellow";
} else {
color = "blue";
}
if (i < 4) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth, screenWidth / 2 - rectWidth * 2, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + (i % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.55);
} else if (i < 7 && i >= 4) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth + rectWidth * 0.25, screenWidth / 2 - rectWidth * 2 + ((i + 1) % 4) * rectWidth + rectWidth * 0.55);
} else if (i >= 7 && i < 10) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth, screenWidth / 2 + rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 + rectWidth - ((i + 2) % 4) * rectWidth + rectWidth * 0.25, screenWidth / 2 + rectWidth + rectWidth * 0.55);
} else if (i >= 10 && i < 12) {
self.ctx.beginPath();
if (i == self.index) {
self.ctx.globalAlpha = 1;
} else {
self.ctx.globalAlpha = 0.4;
}
self.ctx.fillStyle = color;
self.ctx.rect(screenWidth / 2 - rectWidth * 2, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth, rectWidth, rectWidth);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//奖品
self.ctx.font = "8px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText(self.list[i].name, screenWidth / 2 - rectWidth * 2 + rectWidth * 0.25, screenWidth / 2 + rectWidth - ((i + 3) % 4) * rectWidth + rectWidth * 0.55);
}
}
self.ctx.beginPath();
self.ctx.fillStyle = self.btcolor;
self.ctx.globalAlpha = 1;
self.ctx.rect(screenWidth / 2 - rectWidth, screenWidth / 2 - rectWidth, rectWidth * 2, rectWidth * 2);
self.ctx.fill();
self.ctx.save();
self.ctx.restore();
//抽奖按钮
self.ctx.font = "30px Courier New";
self.ctx.globalAlpha = 1;
self.ctx.fillStyle = "#000";
self.ctx.fillText("开始抽奖", screenWidth / 2 - rectWidth + rectWidth * 0.2, screenWidth / 2 - rectWidth + rectWidth * 0.55 * 2);
console.log("round:" + self.round + ",index:" + self.index + ",seep:" + self.seep + ",random:" + self.random);
self.index++;
self.seep = setTimeout(function() {
draw(self);
}, self.seep);
}
});
</script>
</html>
0 0
- canvas -方形抽奖
- canvas 圆盘抽奖应用
- HTML5 Canvas圆盘抽奖应用
- 方形
- HTML5之CANVAS学习，实现抽奖转盘
- Canvas实现微信大转盘抽奖代码
- HTML5 canvas例子-抽奖轮盘-时钟
- 使用Canvas绘图大转盘抽奖功能
- js HTML5 Canvas绘制转盘抽奖
- Canvas + jqueryRotate实现抽奖大转盘
- 使用html5的canvas实现大转盘抽奖
- 方形问题(数方形)
- 抽奖
- 抽奖
- 抽奖
- 抽奖
- 抽奖
- 抽奖
- javascrip基本知识总结
- cocos2dx 3.x 图层点击鼠标事件的屏蔽
- sql多表分类查询
- 《精通CSS：高级Web标准解决方案》学习过程--III
- set、list、map
- canvas -方形抽奖
- Google官方MVP示例之TODO-MVP
- iOS开发-NSAttributedString富文本
- ubuntu 搭建LAMP环境并配置
- J2SE（七）Java之类的实例化
- Android 编程下 SQLite 大数据量操作优化
- Overload（重载）Override(重写)
- OpenCV学习笔记（二）—— OpenCV整体结构
- Caffe学习系列(3)：视觉层（Vision Layers)及参数
