<!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. pathlib模块替代os.path

    pathlib模块替代os.path 在Python 3.4之前和路径相关操作函数都放在os模块里面,尤其是os.path这个子模块,可以说os.path模块非常常用.而在Python 3.4,标准库 ...

  2. 洛谷 - P1522 - 牛的旅行 - Cow Tours - Floyd

    https://www.luogu.org/problem/P1522 好坑啊,居然还有直径不通过新边的数据,还好不是很多. 注意一定要等Floyd跑完之后再去找连通块的直径,不然一定是INF. #i ...

  3. 算法（C#版）动态规划和贪心算法

    https://blog.csdn.net/kouzhuanjing1849/article/details/88954811

  4. ExtensionlessUrlHandler-Integrated-4.0

    window 10 锁定webconfig解决方案 解决办法:  出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.要取消锁定可以以管理 ...

  5. 05-Django-session-admin

    # session- 为了应对HTTP协议的无状态性- 用来保存用户比较敏感的信息- 属于request的一个属性- 常用操作: - request.session.get(key, defaultV ...

  6. C# 中的DevExpress控件的使用

    使用教程:http://training.evget.com/video/5110 C#  System 程序集https://msdn.microsoft.com/zh-cn/library/mt4 ...

  7. 从零开始学MySQL(四)

    上节连接:https://www.cnblogs.com/RajXie/p/10880809.html 上节说到,在创建表的同时,需要给出列的定义.列的定义可展开如下: 列名 列的数据类型 列的一些其 ...

  8. 对数据集做标准化处理的几种方法——基于R语言

    数据集——iris(R语言自带鸢尾花包) 一.scale函数 scale函数默认的是对制定数据做均值为0,标准差为1的标准化.它的两个参数center和scale: 1)center和scale默认为 ...

  9. minicom - 友好易用的串口通信程序

    总览 SYNOPSIS minicom [-somMlwz8] [-c on|off] [-S script] [-d entry] [-a on|off] [-t term] [-p pty] [- ...

  10. DMA方式的数据传送过程

      DMA方式具有如下特点: 1. 外部设备的输入输出请求直接发给主储存器. 主存储器既可以被CPU访问,也可以被外围设备访问.因此,在主存储器中通常要有一个存储管理部件来为各种访问主存储器的申请排队 ...