<!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. 牛客练习赛51 C 勾股定理

    链接:https://ac.nowcoder.com/acm/contest/1083/C 题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输 ...

  2. mysql分组统计后将结果顺序排列（union实现）

    工作中用到统计12月份通话记录,统计号码拨打次数,但是问题出在一个号码可以拨打多次,每次可能接通也可能不接通,如果用主叫号码caller字段group by分组后count(*)统计数目,这样会导致不 ...

  3. 小程序之如和使用view内部组件来进行页面的排版功能

    这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1 ...

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

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

  5. mybatis报错(三)报错Result Maps collection does not contain value for java.lang.Integer解决方法

    转自:https://blog.csdn.net/zengdeqing2012/article/details/50978682 1 [WARN ] 2016-03-25 13:03:23,955 - ...

  6. java创建对象的5种方法

    java是面向对象的,所以在使用中经常会去创建对象,而我们一般创建对象只会使用new关键字去创建,这里给大家总结一下在java中创建对象的5中方法: 使用new关键字 } → 调用了构造函数 使用Cl ...

  7. nginx之热部署，以及版本回滚

    热部署的概念:当从老版本替换为新版本的nginx的时候,如果不热部署的话,会需要取消nginx服务并重启服务才能替换成功,这样的话会使正在访问的用户在断开连接,所以为了不影响用户的体验,且需要版本升级 ...

  8. STM32程序加载与调试

    1.STM32程序的ISP下载,只能使用串口1,其它串口不可以.

  9. docker下安装caffe

    1.安装docker 2.下载caffe docker镜像 docker pull bvlc/caffe:gpu 可以去https://hub.docker.com/search/?q=SSD%20c ...

  10. element隐藏组件滚动条scrollbar使用

    可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...