jquery实现擦除效果
来源:互联网 发布:数码宝贝网络侦探bgm 编辑:程序博客网 时间:2024/05/16 15:33
效果展示:
代码实现:
<!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); //可自由设定//设置顶部canvasvar 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>
1 0
- jquery实现擦除效果
- jquery实现擦除效果
- jquery实现擦除效果
- 擦除效果实现
- jquery擦除效果(刮刮乐)
- jquery擦除效果(刮刮乐)
- HTML5 实现橡皮擦的擦除效果
- HTML5 Canvas实现图片擦除效果
- HTML5 实现橡皮擦的擦除效果
- HTML5 实现橡皮擦的擦除效果
- 擦除效果
- Cocos2dx 实现擦除即橡皮擦效果的实现
- Cocos2dx 实现擦除 橡皮擦 刮奖 效果的实现
- cocos2dx 实现橡皮擦效果以及判断何时擦除完毕
- Android 自定义View——蒙版擦除效果实现
- Android 自定义View——蒙版擦除效果实现
- 图片擦除-美女效果
- 【图片擦除】jQuery.eraser图像擦除插件
- Android中的Service:默默的奉献者 (1)
- C语言 关键字!!面试常碰到!
- java实现2048
- python 使用socket搭建简单服务器
- Struts2+Hibernate5+Spring4自学历程(1)
- jquery实现擦除效果
- getopt
- CentOS下php安装mcrypt扩展
- centos7之lamp环境搭建
- Web APP开发技巧总结
- 数据结构学习工具总结
- Sql Server 2008 R2 清空数据库中ldf日志文件
- CodeForces 288APolo the Penguin and Strings
- classpath、path、JAVA_HOME的作用及JAVA环境变量配置