刮刮乐移动端
来源:互联网 发布:网络tv电视直播软件 编辑:程序博客网 时间:2024/06/10 20:45
<meta name="viewport" content="width=device-width">
<style>
*{
padding: 0;
margin:0;
}
#box{
width:100%;
height:200px;
}
#price{
width:100%;
height:200px;
background: orange;
}
#c1{
position: absolute;
top:0;
left:0;
}
</style>
<div id="box">
<div id="price"></div><canvas id="c1">此浏览器不支持canvas</canvas>
</div>
<script type="text/javascript">
var c1=document.getElementById("c1");
var ctx=c1.getContext("2d");
//返回窗口的文档显示区的宽度。
var w=window.innerWidth;
// console.log(w);
c1.width=w;
c1.height=200;
//遮罩层
ctx.fillStyle="#ccc";
ctx.fillRect(0,0,w,200);
//touchstart事件:当手指触摸屏幕时触发,即使已经有一个手指放在屏幕上也会触发
//touchmove事件:当手指在屏幕上滑动的时候连续的触发
c1.addEventListener("touchstart",sfn);
c1.addEventListener("touchmove",mfn);
function sfn(e){//事件对象
// console.log(e.touches);
var startX=e.touches[0].clientX;//获取到触点到坐标
var startY=e.touches[0].clientY;
ctx.beginPath();
ctx.lineWidth=25;
ctx.lineCap="round";//设置线段顶点到样式
ctx.lineJoin="round";//线段交接的位置的样式
ctx.globalCompositeOperation="destination-out";
ctx.moveTo(startX,startY);
}
function mfn(e){//事件对象
var moveX=e.touches[0].clientX;
var moveY=e.touches[0].clientY;
ctx.lineTo(moveX,moveY);
ctx.stroke();
}
</script>
阅读全文
0 0
- 刮刮乐移动端
- 移动端
- 移动端
- 移动端
- 移动端
- 移动端
- 移动端
- 移动端-刮刮乐的实现方式
- 移动端JS事件、移动端框架
- 移动端 例子div随手指移动
- web移动端禁用屏幕移动
- 移动端div随手指移动
- 移动端自由移动元素位置
- 移动web 移动端Touch事件
- 移动计算桌面端
- 移动端js+html5
- 移动端开发小结
- 移动端开发技巧
- 请求转发(Forward)和重定向(Redirect)的区别
- 20170921-浅谈第二阶段Javaweb的学习以及两次公司笔试面试的经验(一)
- banner 无线轮播+小圆点
- 自定义简单的(tomcat)web服务器
- JDBC学习篇之使用ResultSet执行简单查询操作
- 刮刮乐移动端
- 【51Nod1836】战忽局的手段
- Java学习第四天
- TI am335x 内核分析2--资源遍历代码分析
- Viewpager+滚动+ta...(代码)
- git bash命令
- SpringCloud基础(4)
- NFS挂载的安装部署和一些记录
- 关于纯C中如何向函数传递结构体指针的记载