<!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. win10上安装redis

    1.下载安装包: 下载地址: 链接:https://pan.baidu.com/s/1oGPrfQJvFz-fX_KNcTTNUw 提取码:eake 2.在适合的位置创建一个文件夹,并将下载到的压缩包 ...

  2. 6-1 如何读写csv数据

    >>> from urllib import urlretrieve >>> urlretrieve('http://table.finance.yahoo.com ...

  3. idea无法使用注解@Data解决方法

    @Data相关依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lomb ...

  4. 豆壳CMS本地安装教程

    DouPHP安装教程 一.下载DouPHP程序. 解压后得到三个文件夹 将upload文件夹里面的内容复制到wamp的www的文件夹. 二.打开浏览器,输入127.0.0.1. 勾选后选择下一步 注意 ...

  5. JAVA 泛型 - Class<T>

    Class 类 Class 已经泛型化了,但是很多人一开始都感觉其泛型化的方式很混乱.Class 中类型参数 T 的含义是什么?事实证明它是所引用的类接口.怎么会是这样的呢?那是一个循环推理?如果不是 ...

  6. UITextView学习笔记

    =================================== UITextView =================================== 1.UITextView常用属性 ...

  7. Java常用日期处理方法

    import org.apache.commons.lang3.time.FastDateFormat; import org.joda.time.DateTime; import org.apach ...

  8. Django中常用字段

    一.Django框架的常用字段 Django ORM 常用字段和参数 常用字段 常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列 ...

  9. Matrix快速幂 模板

    讲解:http://www.cnblogs.com/SYCstudio/p/7211050.html 给定n*n的矩阵A,求A^k https://www.luogu.org/problem/show ...

  10. Insomni'hack teaser 2019 - Reverse - beginner_reverse

    参考链接 https://ctftime.org/task/7455 题目描述 A babyrust to become a hardcore reverser 点我下载 解题过程 一道用rust写的 ...