jquery擦除效果(刮刮乐)
来源:互联网 发布:win10无法识别有线网络 编辑:程序博客网 时间:2024/05/22 05:29
效果展示如下图:
实现代码
- <!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>
阅读全文
0 0
- jquery擦除效果(刮刮乐)
- jquery擦除效果(刮刮乐)
- jquery实现擦除效果
- jquery实现擦除效果
- jquery实现擦除效果
- 擦除效果
- 图片擦除-美女效果
- 擦除效果实现
- 【图片擦除】jQuery.eraser图像擦除插件
- Quartz2D - 08.图片擦除效果
- 擦除式图片轮番显示效果
- 擦除式图片轮番显示效果
- 擦除式图片轮番显示效果
- HTML5 实现橡皮擦的擦除效果
- HTML5 Canvas实现图片擦除效果
- HTML5 实现橡皮擦的擦除效果
- HTML5 实现橡皮擦的擦除效果
- java泛型(擦除)
- Java之IO操作,File类、文件过滤器
- 多maven版本path环境配置解析
- EMV 的交易流程
- 深入理解JVM(四)——各个版本提供的垃圾收集器
- UEFI下安装系统
- jquery擦除效果(刮刮乐)
- MFC实现连连看四:滚动条的使用
- erlang中的record
- gdb调试多线程与多进程
- python小练习七——支持多用户在线的FTP程序
- 机器学习笔记--朴素贝叶斯法
- H5调用本地app
- IA32处理器任务切换过程 学习总结
- 4195: [Noi2015]程序自动分析