<!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 刮图-刮一刮的更多相关文章

  1. 首次开发H5长图页总结

    首次开发H5长图页总结. 资源统一加载 资源统一加载, 分开获取 定义资源标识符 在src/resources目录下 定义各个资源模块. 在Asset.js中获取定义好的所有模块, 循环出具体的文件路 ...

  2. C# WPF 擦出效果，刮图效果

    找了很久 <Window x:Class="TestWebbowser.TestMaskWind" xmlns="http://schemas.microsoft. ...

  3. H5 折线图插件

    一.可以使用Highcharts,参考网址:https://api.hcharts.cn/highcharts: 二.可以使用Echarts,参考网址:http://echarts.baidu.com ...

  4. canvas刮刮乐和画笔

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  5. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

  6. Guitar Pro小课堂之如何演奏刮弦

    每当我们听到吉他现场演出的时候,看到吉他手在激烈的刮弦时,都觉得很酷,非常有感染力.刮弦在我们弹吉他或编曲时,会经常用到,虽然时间很短,但会为你加分不少. 那么我们应该如何演奏刮弦呢,我们先用E5和弦 ...

  7. Android 撕衣服（刮刮乐游戏）

    项目简单介绍: 该项目为撕衣服,相似刮刮乐游戏 具体介绍: 用户启动项目后.载入一张图片,当用户点击图片的时候,点击的一片区域就会消失.从而显示出在这张图片以下的图片 这个小游戏相似与刮奖一样,刮开涂 ...

  8. 微信小程序刮刮乐

    <view class="scratch_body"> <image class="scratch_body_bg" mode="w ...

  9. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

随机推荐

  1. [多校联考2019(Round 4 T1)][51nod 1295]Xor key(可持久化trie)

    [51nod 1295]Xor key(可持久化trie) 题面 给出一个长度为n的正整数数组A,再给出Q个查询,每个查询包括3个数,L, R, X (L <= R).求A[L] 至 A[R] ...

  2. 搜索专题：HDU1241 Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  3. 原生ajax与伪ajax

    原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...

  4. 简单的物流项目实战，WPF的MVVM设计模式(一)

    新建一个WPF项目,命名为WMS 然后分别新建文件夹,Data,Models,Views,ViewModels,Services,如下图所示 然后通过NuGet安装连个Nuget包,分别为SQLite ...

  5. POI读取文件的最佳实践

    POI是 Apache 旗下一款读写微软家文档声名显赫的类库.应该很多人在做报表的导出,或者创建 word 文档以及读取之类的都是用过 POI.POI 也的确对于这些操作带来很大的便利性.我最近做的一 ...

  6. es7.2版本安装ik分词

    (一)到官网下载https://github.com/medcl/elasticsearch-analysis-ik对应版本的ik(直接下载releases版本,避免maven打包!!!如果不是这个版 ...

  7. React -- 3/100 】组件通讯

    通讯 | props | prop-types 组件通讯 Props: 组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props /* class */ .parent-box ...

  8. js随机验证码

    随机验证码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  9. Codeforces 950 010子序列拆分 数列跳棋

    A B a,b两个序列分成K段 每一段的值相等 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset ...

  10. 特殊字符(包括emoji)梳理和UTF8编码解码原理（转）

    转自:https://www.jianshu.com/p/57c27d67a8a8 背景知识 emoji表情符号,是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建 ...