<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="../reset.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="canvas2d.js"></script>
<script type="text/javascript">
$(function ()
{
var $frontCanvas = new Canvas2D($("#front"));
var $backCanvas = new Canvas2D($("#back"));
$frontCanvas.penColor("gold");
$frontCanvas.fontSize(24);
$frontCanvas.drawRect({x: 0, y: 0}, {x: $frontCanvas.width(), y: $frontCanvas.height()}, true);
$frontCanvas.penColor("red");
$frontCanvas.drawText("Hello World", {x: 80, y: 60}, true);
var $backCanvas = new Canvas2D($("#back"));
$backCanvas.penColor("silver");
$backCanvas.fontSize(24);
$backCanvas.drawRect({x: 0, y: 0}, {x: $backCanvas.width(), y: $backCanvas.height()}, true);
// $backCanvas.clearRect({x: 0, y: 0}, {x: 100, y: 2});
var isStart = false;
var startp = {};
var ps = [];
$("#back").mousedown(function (event)
{
isStart = true;
startp = $backCanvas.getCanvasPoint(event.pageX, event.pageY);
console.log("down");
}).mousemove(function (event)
{
if (!isStart)return;
// console.log(event.clientX , event.clientY);
// console.log(event.pageX, event.pageY);
var p = $backCanvas.getCanvasPoint(event.pageX, event.pageY);
// var tmp = {};
var k;
//startp p
if (p.x > startp.x)
{
k = (p.y - startp.y) / (p.x - startp.x);
// k = Math.abs(k);
console.log(k);
for (var i = startp.x; i < p.x; i += 5)
{
// tmp.x = i;
// tmp.y = ;
$backCanvas.clearRect({x: i, y: (startp.y + (i - startp.x) * k)}, {});
// ps.push(tmp);
}
} else
{
k = (p.y - startp.y) / (p.x - startp.x);
// k = Math.abs(k);
for (var i = startp.x; i > p.x; i -= 5)
{
// tmp.x = i;
// tmp.y = startp.y - ( startp.x - i ) * k;
// ps.push(tmp);
$backCanvas.clearRect({x: i, y: (startp.y + ( i - startp.x ) * k)}, {});
}
}
startp = p;
// ps.push(p);
// redraw(ps);
}).mouseup(function (event)
{
isStart = false;
});
function redraw(ps)
{
for (var i = 0; i + 1 < ps.length; i++)
{
var start = ps[i];
// var end = ps[i + 1];
$backCanvas.clearRect(start, {});
}
startp = ps[ps.length - 1];
ps = [];
}
});
</script>
<style type="text/css">
#container
{
position: relative;
width: 300px;
height: 160px;
margin: 100px auto 0;
}
#front, #back
{
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
border: 1px solid #444;
}
</style>
</head>
<body>
<div id="container">
<canvas id="front"></canvas>
<canvas id="back"></canvas>
</div>
</body>
</html>
HTML5 CSS3 ：canvas 模拟实现电子彩票刮刮乐实例代码
5星 · 超过95%的资源 需积分: 50 78 浏览量
2014-07-12
10:34:12
上传
评论 10
收藏 105KB RAR 举报 
09_canvas_guaguale.rar （12个子文件） 
09_canvas_guaguale 
canvas2d.js 4KB jquery-1.8.3.js 261KB
index.html 4KB beta02 canvas2d.js 4KB
s_title.png 24KB test.html 493B GuaGuaLe.js 3KB index.html 1KB GuaGuaLe2.js 3KB
s_bd.jpg 1KB index.html.bak 1KB index.html.bak 4KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页