jquery擦除效果(刮刮乐)
2016-07-25 21:54
579 查看
效果展示如下图:
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刮刮卡</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<canvas id="myCanvas_bottom" style="border:1px solid #d3d3d3;position: absolute;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="myCanvas_top" style="border:1px solid #d3d3d3;position: absolute;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<script type="text/javascript">
var w = 800;
var h = 80;
var mousedown = false;
//设置底部canvas样式等
var canvas_bottom = document.getElementById('myCanvas_bottom');
canvas_bottom.width = w;
canvas_bottom.height = h;
canvas_bottom_ctx = canvas_bottom.getContext('2d');
canvas_bottom_ctx.font = '30px Verdana';
canvas_bottom_ctx.textAlign = 'left';
var gradient = canvas_bottom_ctx.createLinearGradient(0, 0, canvas_bottom.width, 0);
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1, 'red');
canvas_bottom_ctx.strokeStyle = gradient;
canvas_bottom_ctx.strokeText('谢谢惠顾,感谢您这次的选择', 10, 50); //可自由设定
//设置顶部canvas
var canvas_top = document.getElementById('myCanvas_top');
canvas_top.width = w;
canvas_top.height = h;
var offsetX = canvas_top.offsetLeft;
var offsetY = canvas_top.offsetTop;
canvas_top_ctx = canvas_top.getContext('2d');
canvas_top_ctx.fillStyle = 'gray';
canvas_top_ctx.fillRect(0, 0, w, h);
canvas_top_ctx.globalCompositeOperation = 'destination-out';
canvas_top.addEventListener('touchstart', eventDown);
canvas_top.addEventListener('touchend', eventUp);
canvas_top.addEventListener('touchmove', eventMove);
canvas_top.addEventListener('mousedown', eventDown);
canvas_top.addEventListener('mouseup', eventUp);
canvas_top.addEventListener('mousemove', eventMove);
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(canvas_top_ctx) {
beginPath()
arc(x, y, 10, 0, Math.PI * 2);
fill();
}
}
}
</script>
</body>
</html>
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刮刮卡</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<canvas id="myCanvas_bottom" style="border:1px solid #d3d3d3;position: absolute;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="myCanvas_top" style="border:1px solid #d3d3d3;position: absolute;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<script type="text/javascript">
var w = 800;
var h = 80;
var mousedown = false;
//设置底部canvas样式等
var canvas_bottom = document.getElementById('myCanvas_bottom');
canvas_bottom.width = w;
canvas_bottom.height = h;
canvas_bottom_ctx = canvas_bottom.getContext('2d');
canvas_bottom_ctx.font = '30px Verdana';
canvas_bottom_ctx.textAlign = 'left';
var gradient = canvas_bottom_ctx.createLinearGradient(0, 0, canvas_bottom.width, 0);
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1, 'red');
canvas_bottom_ctx.strokeStyle = gradient;
canvas_bottom_ctx.strokeText('谢谢惠顾,感谢您这次的选择', 10, 50); //可自由设定
//设置顶部canvas
var canvas_top = document.getElementById('myCanvas_top');
canvas_top.width = w;
canvas_top.height = h;
var offsetX = canvas_top.offsetLeft;
var offsetY = canvas_top.offsetTop;
canvas_top_ctx = canvas_top.getContext('2d');
canvas_top_ctx.fillStyle = 'gray';
canvas_top_ctx.fillRect(0, 0, w, h);
canvas_top_ctx.globalCompositeOperation = 'destination-out';
canvas_top.addEventListener('touchstart', eventDown);
canvas_top.addEventListener('touchend', eventUp);
canvas_top.addEventListener('touchmove', eventMove);
canvas_top.addEventListener('mousedown', eventDown);
canvas_top.addEventListener('mouseup', eventUp);
canvas_top.addEventListener('mousemove', eventMove);
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(canvas_top_ctx) {
beginPath()
arc(x, y, 10, 0, Math.PI * 2);
fill();
}
}
}
</script>
</body>
</html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码