canvas实现刮图效果

 <canvas id="myCanvas" width=300 height=300></canvas>

JavaScript代码:

  var canvas = document.getElementById(‘myCanvas‘),
      ctx = canvas.getContext(‘2d‘),
      w = canvas.width,
      h = canvas.height,
      area = w * h,
      flag=false,
      l = canvas.offsetLeft;
      t = canvas.offsetTop,
      ctx.fillStyle = "#ccc";
      //覆盖第一层(添加灰色涂层)
       ctx.fillRect(0, 0, w, h);
           //添加背景 即为要刮开的图像
       canvas.style.backgroundImage = ‘url(banner.jpg)‘;      //必须添加设置
       ctx.globalCompositeOperation = ‘destination-out‘; //destination-in:新加内容保留 其他变透明;destination-out:新加内容透明,其他保留;
       bindEvent();
       var bindEvent = function () {          //移动端
          //  canvas.addEventListener(‘touchmove‘, moveFunc, false);
           // canvas.addEventListener(‘touchend‘, endFunc, false);

          //pc端
            canvas.onmousedown = function (e) {
                flag = true;
                lastX = e.clientX - canvas.getBoundingClientRect().left; //canvas里面的坐标
                lastY = e.clientY - canvas.getBoundingClientRect().top;
                //获取坐标
                ctx.beginPath();
                ctx.arc(lastX, lastY, 15, 0, Math.PI * 2, 0);
                ctx.fill();
            }
            canvas.onmouseup = function (e) {
                flag = false;
            }
            canvas.onmousemove = function (e) {
                var x = e.clientX - canvas.getBoundingClientRect().left, //当前移动后的convas内部坐标
                    y = e.clientY - canvas.getBoundingClientRect().top;
                if (flag) {
                    ctx.arc(x, y, 15, 0, Math.PI * 2, 0);
                    ctx.fill();

                }
            }
        };

效果图:

时间: 2024-10-19 01:49:37

canvas实现刮图效果的相关文章

简单入门canvas - 通过刮奖效果来学习

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然

canvas 擦除、刮刮卡效果

基于HTML5 Canvas技术实现的擦除.刮刮卡效果,轻轻刮去图层就可以模拟真实的效果. 原理:利用画布Canvas及其它自身API,在Canvas元素上绘制一个灰色蒙层,然后通过监听用户鼠标移到或手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片(或背景图),即达到擦除效果. HTML:(注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上) <canvas></canvas> Javascript: -- 1.禁用页面的鼠标选中拖动(

canvas实现刮刮卡效果

canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.touchmove 完整代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content=&q

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图.先看看绘制的效果: 代码: public class MyView extends View { //坐标轴原点的位置 private int xPoint=60; private int yPoint=260; //刻度长度 private int xScale=8;  //8个单位构

css3 canvas之刮刮卡效果

今天我有时间学习了一下html5新增的这个标签canvas,以前虽然经常写html5网页,可是都没用过这个标签.最近刚弄了一个h5微信送祝福的网页,差不多折腾了一个星期,所以我觉得我得系统的来学习一下html5和css3了. 好了,废话不多说,下面贴出我的代码. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <ti

canvas刮奖效果

上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html

【2014年最后的分享啦】Android实现自定义刮刮卡效果View

一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文<Android实现自定义圆形.圆角和椭圆ImageView(使用Xfermode图形渲染方法)>, 今天我们来看看如何实现电商app里常用到的刮刮卡效果的view组件,其实原理和实现圆角图片的差不多,都是使用Xfermode渲染模式来实现的. (老规矩,源码在博文最后给出哈) 基本原理步骤是这样的