<!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. 题解 AT1357 【n^p mod m】

    此题就是快速幂取模 先简单讲一讲快速幂 首先,快速幂的目的就是做到快速求幂,假设我们要求a^b,按照朴素算法就是把a连乘b次,这样一来时间复杂度是O(b)也即是O(n)级别,快速幂能做到O(logn) ...

  2. Java JPA设置默认值、Timestamp设置、自动获取时间

    设置默认值 @Column(name="state",columnDefinition="tinyint default 0") private Integer ...

  3. layoutSubviews何时调用的问题(原文：http://www.cnblogs.com/pengyingh/articles/2417211.html)

    今天跟旺才兄学习了一下UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这 ...

  4. win10系统中photoshop cs6中界面字体太小的解决方法

    win10系统中photoshop cs6中界面字体太小的解决方法 ps页面系统字体特别小,解决方法如下: 右键ps图标—属性—兼容性—勾选替代高dpi缩放行为,缩放执行选为默认,如果不行三个都试试

  5. LNMP小项目搭建，Centos7.6环境搭建Linux+nginx+mysql+php，wordpress个人博客的搭建(完整搭建步骤)

    一.LNMP搭建,基于nginx服务器搭建wordpress个人博客 准备环境:centos7.6环境下web服务器(nginx+php):主机名:web01,ip:192.168.248.172my ...

  6. grandson定理

    用处:求解同余线性方程组 inv:逆元 一堆物品 3个3个分剩2个 5个5个分剩3个 7个7个分剩2个 问这个物品有多少个 5*7*inv(5*7,  3) % 3  =  1 3*7*inv(3*7 ...

  7. c调用c++

    g++ main.c math.cpp math.h中加入extern "C"

  8. CF1103D Codeforces Round #534 (Div. 1) Professional layer 状压 DP

    题目传送门 https://codeforces.com/contest/1103/problem/D 题解 失去信仰的低水平选手的看题解的心路历程. 一开始看题目以为是选出一些数,每个数可以除掉一个 ...

  9. re模块下的的常用方法

    引入模块: import re 1.查找findall   匹配所有,每一项都是列表中的一个元素 ret=re.findall("\d+","sjkhk172按实际花费9 ...

  10. java:投个票程序

    投票城市用到了:system.in, 正则pattern,matcher,排序接口comparable 复写compareTo排序方法 一个班级在选班长,按序号进行投票,并将票数最高的放在第一位显示 ...