<!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 68 浏览量
2014-07-12
10:34:12
上传
评论 10
收藏 105KB RAR 举报
鸿洋_
- 粉丝: 6w+
- 资源: 111
最新资源
- cutcamera1699880194026.png
- 1999-2022年各省城镇居民人均消费支出数据(无缺失).xls
- 药店销售管理系统ssm(药品销售)【说明】资源来源网络以及部分开源社区、仅供参考与学习、项目不可商用、一切后果由使用者承担、若
- DHT11 (2)(2).apk
- 基于JSP毕业设计-学生管理系统-毕业设计.zip
- HTML+CSS+JS精品网页模板H111.rar
- 人工智能:python+OpenCV实现视频跟踪流水线缺陷检测识别
- 2005-2022年各省居民人均消费支出数据(无缺失).xlsx
- HTML+CSS+JS精品网页模板H110.rar
- 2024第四届声纹识别产业发展与创新研讨会嘉宾PPT+鲁棒声纹识别的对抗防御
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页