H5 刮图-刮一刮
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0}
</style>
</head>
<body>
<canvas/>
<script>
(function(bodyStyle) {
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
img.addEventListener('load', function(e) {
var ctx;
img.width=window.innerWidth ;//2000;
img.height=window.innerHeight;//2000;
//img.width=document.documentElement.clientWidth;
//img.height=document.documentElement.clientHeight;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}
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,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 80, 0, Math.PI * 2);
fill();
}
}
}
canvas.width=w;
canvas.height=h;
//canvas.style.backgroundImage='url('+img.src+')';
canvas.style.background='url('+img.src+')';
canvas.style.backgroundSize =''+ w+ 'px '+ h +'px';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);
layer(ctx);
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
img.src = 'Chrysanthemum.jpg';
})(document.body.style);
</script>
</body>
</html>
-------demo 2-----------
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0} </style>
</head>
<body>
<div>
<img id="bgImg" src="bar.jpg" style="position:absolute; left:0px; top:0px;" />
<canvas id="CanvasDoodle" imgsrc='Chrysanthemum.jpg' style='position:absolute;left:0px; top:0px;background: transparent;'></canvas>
</div>
<script> function CanvasDoodle(canvas){
this.canvas=canvas;
this.ctx=canvas.getContext("2d");
this.imgSrc=canvas.getAttribute("imgsrc");
document.getElementById('CanvasDoodle').width=window.innerWidth;
document.getElementById('CanvasDoodle').height=window.innerHeight;//2000;
document.getElementById('bgImg').width=canvas.width;
document.getElementById('bgImg').height=canvas.height; //this.width=canvas.width;
//this.height=canvas.height;
this.left=parseInt(canvas.style.left);
this.top=parseInt(canvas.style.top);
this.touchX=0;
this.touchY=0;
this.needDraw=false;
this.init();
} CanvasDoodle.prototype={
init:function(){
var _self=this; var img=new Image();
img.onload=function(){
var pat=_self.ctx.createPattern(img,"no-repeat");
_self.ctx.strokeStyle=pat;
_self.ctx.lineCap="round";
_self.ctx.lineJoin="round";
_self.ctx.lineWidth="100";
}
img.src=this.imgSrc;
this.canvas.addEventListener('mousedown',function(e){
e.preventDefault();
_self.needDraw=true; _self.ctx.beginPath();
_self.ctx.moveTo(e.clientX-_self.left,e.clientY-_self.top);
},false); this.canvas.addEventListener('mousemove',function(e){
e.preventDefault();
if(_self.needDraw){
_self.ctx.lineTo(e.clientX-_self.left,e.clientY-_self.top);
_self.ctx.stroke();
}
},false); this.canvas.addEventListener('mouseup',function(e){
e.preventDefault();
_self.needDraw=false;
}); }
}; new CanvasDoodle(document.getElementById('CanvasDoodle')); </script>
</body>
</html>
H5 刮图-刮一刮的更多相关文章
- 首次开发H5长图页总结
首次开发H5长图页总结. 资源统一加载 资源统一加载, 分开获取 定义资源标识符 在src/resources目录下 定义各个资源模块. 在Asset.js中获取定义好的所有模块, 循环出具体的文件路 ...
- C# WPF 擦出效果，刮图效果
找了很久 <Window x:Class="TestWebbowser.TestMaskWind" xmlns="http://schemas.microsoft. ...
- H5 折线图插件
一.可以使用Highcharts,参考网址:https://api.hcharts.cn/highcharts: 二.可以使用Echarts,参考网址:http://echarts.baidu.com ...
- canvas刮刮乐和画笔
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- canvas实现刮刮卡效果
canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener touchstart.tou ...
- Guitar Pro小课堂之如何演奏刮弦
每当我们听到吉他现场演出的时候,看到吉他手在激烈的刮弦时,都觉得很酷,非常有感染力.刮弦在我们弹吉他或编曲时,会经常用到,虽然时间很短,但会为你加分不少. 那么我们应该如何演奏刮弦呢,我们先用E5和弦 ...
- Android 撕衣服（刮刮乐游戏）
项目简单介绍: 该项目为撕衣服,相似刮刮乐游戏 具体介绍: 用户启动项目后.载入一张图片,当用户点击图片的时候,点击的一片区域就会消失.从而显示出在这张图片以下的图片 这个小游戏相似与刮奖一样,刮开涂 ...
- 微信小程序刮刮乐
<view class="scratch_body"> <image class="scratch_body_bg" mode="w ...
- 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
随机推荐
- 【C#】获取"我的电脑"的名字，如This PC、这台计算机
原文:[C#]获取"我的电脑"的名字,如This PC.这台计算机 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
- wordpress添加index页面跳转链接
1. 制作page页面 1.1 在themes下的主题目录新建一个page页面 1.2 在wordpress后台新建页面跟在目录页面中相同名字的页面文件 1.3 复制后台页面中的古定链接 1.4 在i ...
- 使用NPOI读取Excel数据并写入SQLite
首先,我们来建一个数据库,我们就叫Hello.db(不一定是db后缀,你可以sqlite,sqlite3,db3)都可以作为识别,然后往里面建一个空的表格,如下图所示 然后建一个Excel表格,往表格 ...
- SpringMVC+Spring4+Mybatis3
http://blog.csdn.net/jiuqiyuliang/article/details/45286191 http://blog.csdn.net/jiuqiyuliang/article ...
- $strobe$monitor$display
$strobe:当该时刻的所有事件处理完后,在这个时间步的结尾打印一行格式化的文本,语法$strobe( Argument,...);$fstrobe( Mcd, Argument,...);Mc ...
- 【转】交换分区SWAP
SWAP就是LINUX下的虚拟内存分区,它的作用是在物理内存使用完之后,将磁盘空间(也就是SWAP分区)虚拟成内存来使用. 它和Windows系统的交换文件作用类似,但是它是一段连续的磁盘空间,并且对 ...
- AtCoder Regular Contest 066 E - Addition and Subtraction Hard （结论+DP）
Time limit : 2sec / Memory limit : 256MB Score : 900 points Problem Statement Joisino has a formula ...
- Codeforces 922 思维贪心 变种背包DP 质因数质数结论
A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...
- pandas的数据统计函数
# 1汇总类统计 # 2唯一去重和按值计数 # 3 相关系数和协方差 import pandas as pd # 0 读取csv数据 df = pd.read_csv("beijing_ti ...
- mysql5.7.26-忘记密码（CentOS为例）
编辑 my.cnf [mysqld]下插入 skip-grant-tables [root@VM_0_7_centos mysql]# vim /etc/my.cnf # For advice on ...