<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

        body {

            height: 1000px;

        }

    </style>

</head>

<body>

    <div style="position: relative; width: 300px; height: 100px;">

        <canvas id="rect" width="300" height="100" style="position:absolute;left:0;top:0;"></canvas>

        <canvas id="arc" width="300" height="100" style="position:absolute;left:0;top:0;"></canvas>

    </div>

    <script type="text/javascript">

        function WipeImg(rect, arc) {

            var canvas = document.getElementById(rect);

            var context = canvas.getContext("2d");

            var img = new Image();

            img.onload = function () {

                context.drawImage(this, 0, 0, canvas.width, canvas.height);//将图片放置画布上

            }

            img.src = '../js_面向对象/image/bdlogo.gif';//图片地址

            var canvas2 = document.getElementById(arc);

            var context2 = canvas2.getContext("2d");

            context2.fillStyle = "#ccc";

            context2.fillRect(0, 0, 300, 100);

            context2.fill();

            context2.globalCompositeOperation = "destination-out";//源图像是透明的，目标图像部分被显示出来

            var isMousedown = false;

            canvas2.addEventListener("mousedown", function (e) {

                isMousedown = true;

                var docEle = document.documentElement;

                var x = (e.clientX) ;+ docEle.scrollLeft - docEle.clientLeft;

                var y = (e.clientY) + docEle.scrollTop - docEle.clientTop;

                //可以利用createRadialGradient给定指定值去画渐变效果

                //var radgrad = context2.createRadialGradient(x, y, 0, x, y, 30);

                //radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');

                //radgrad.addColorStop(1, 'rgba(255,255,255,0)');

                //context2.fillStyle = radgrad;

                context2.fillStyle = "#fff";

                context2.beginPath();

                context2.arc(x, y, 30, 0, Math.PI * 2, true);

                context2.closePath();

                context2.fill();

                canvas2.addEventListener("mousemove", function (e) {

                    if (!isMousedown) return false;

                    var docEle = document.documentElement;

                    var x = (e.clientX)  + docEle.scrollLeft - docEle.clientLeft;

                    var y = (e.clientY) + docEle.scrollTop - docEle.clientTop;

                    var radgrad = context2.createRadialGradient(x, y, 0, x, y, 30);

                    radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');

                    radgrad.addColorStop(1, 'rgba(255,255,255,0)');

                    context2.fillStyle = radgrad;

                    context2.beginPath();

                    context2.arc(x, y, 30, 0, Math.PI * 2, true);

                    context2.closePath();

                    context2.fill();

                }, false);

                canvas2.addEventListener("mouseup", function (e) {

                    isMousedown = false;

                }, false);

            }, false);

        }

        WipeImg("rect", "arc");

    </script>

</body>

</html>

　　

canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果的更多相关文章

  1. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  2. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

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

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 使用MDScratchImageView实现刮奖效果

    使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...

  5. canvas写的一个刮奖效果

    <!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X ...

  6. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  7. HTML5 Canvas实战之刮奖效果【转】

    开源项目地址:https://github.com/artwl/Lottery 作者博客地址:http://www.cnblogs.com/jscode/p/3580878.html 谢谢浏览!

  8. 使用PorterDuffXfermode画出刮刮奖效果p146-p148

    package com.zzw.Qunyinzghuan3; import android.content.Context; import android.graphics.Bitmap; impor ...

  9. canvas 绘制刮刮卡

    思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...

随机推荐

  1. iOS使用textfield注意的细节

    一般做登录界面或者要填写表之类的页面会经常使用到textfield.使用很简单,但是其实他有很多小的处理细节,这回让你显得有经验,交互性很好.在这里呢,我就直接拿stroyboard中的截图来说. c ...

  2. ReactiveCocoa常见操作方法介绍/MVVM架构思想

      1.ReactiveCocoa常见操作方法介绍. 1.1 ReactiveCocoa操作须知 所有的信号(RACSignal)都可以进行操作处理,因为所有操作方法都定义在RACStream.h中, ...

  3. JS事件整理

    onclick 鼠标点击事件 ondblclick 鼠标双击事件 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件 onmousedown 鼠标按下事件 onmousemove ...

  4. Unity的旋转-四元数,欧拉角用法简介

    当初弄不明白旋转..居然找不到资料四元数应该用轴角相乘...后来自己摸明白了 通过两种旋转的配合,可以告别世界空间和本地空间矩阵转换了,大大提升效率. 每个轴相乘即可,可以任意轴,无限乘.无万向节锁问 ...

  5. Android-Universal-Image-Loader的缓存处理机制

    讲到缓存,平时流水线上的码农一定觉得这是一个高大上的东西.看过网上各种讲缓存原理的文章,总感觉那些文章讲的就是玩具,能用吗?这次我将带你一起看过UIL这个国内外大牛都追捧的图片缓存类库的缓存处理机制. ...

  6. Underscore.js 初探

    一. 简介   Underscore 这个单词的意思是“下划线”.   Underscore.js 是一个 JavaScript 工具库,提供了一整套的辅助方法供你使用.   Think that - ...

  7. 深入对比数据科学工具箱：Python和R之争

    建议:如果只是处理(小)数据的,用R.结果更可靠,速度可以接受,上手方便,多有现成的命令.程序可以用.要自己搞个算法.处理大数据.计算量大的,用python.开发效率高,一切尽在掌握. 概述 在真实的 ...

  8. Python3基础 把一个列表中内容给另外一个列表，形成两个独立的列表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  9. Bootstrap_按钮工具栏

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等. Bootstrap框架为大家提供了按钮组组件. <div ...

  10. angular之控制器（0）

    一.控制器的含义 在angularJS中,controlle是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为 二.控制器的作用 1. 控制 AngularJS 应 ...