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), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
随机推荐
- 一条简单的 SQL 查询语句到底经历了什么？
一.MySQL 基础架构 整体来说 MySQL 主要分为两个部分,一个部分是:Server 层,另一部分是:存储引擎层. 其中 Server 层包括有连接器.查询缓存.分析器.优化器.执行器等,存 ...
- TScreen研究（有待研究）
先扔在这里,待研究: http://blog.csdn.net/lailai186/article/details/8141170 procedure TForm1.Button1Click(Send ...
- 【学习总结】快速上手Linux玩转典型应用-第4章-准备工作
课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 准备工作一 2. 准备工作二 ===================================================== ...
- Spring基础06——依赖注入的一些细节
1.字面值 可用字符串表示的值,可以通过<value>元素标签或value属性进行注入.基本数据类型及其封装类,String类等类型都可以采取字面值注入的方式.若字面值包含特殊字符,可以使 ...
- Django中间件拦截未登录url
1.利用装饰器在视图中拦截未登录的url @login_required(login_url='/user/login/') def homepage(request): pass 这种方法适合于程序 ...
- if [ $? -eq 0 ]; then该语句是什么含义?
某个shell脚本 # mkimage.sh echo "make and copy android images" ./mkimage.sh ]; then echo " ...
- 用Python编写一个ftb
程序文件结构 具体代码实现 服务端: 执行文件bin/ftb_server import os,sys PATH = os.path.dirname(os.path.dirname(os.path.a ...
- C#设置欢迎窗体由不透明变透明
public Form1() { InitializeComponent(); } private bool isForm1 = true; //设 ...
- MySQL/mariadb知识点总结
1.mysql/mariadb知识点总结:事务相关概念(事务总结-1) http://www.zsythink.net/archives/1204 2.mysql/mariadb知识点总结:事务控制语 ...
- HC-42蓝牙模块-nRF52832-数传蓝牙
资料下载地址:链接:https://pan.baidu.com/s/1RRajrI5NvNY8tRVuYbOTug 提取码:31ho 我的蓝牙模块淘宝购买地址:https://detail.tm ...