canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

<!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>

  

时间: 2024-11-05 16:06:38

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

HTML5实现刮奖效果

原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out.意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明.这样可能不好理解,后面实现的时候会解释.有了globalCompositeOperation这个属性,实现过程就很简单了. 我们需要有两个

canvas刮奖效果

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

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

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

刮刮卡刮奖效果

//代码框架 <div class="content-box"> <div id="demo1" class="scratchpad"></div> <div id="demo1-percent"> </div> <script type="text/javascript"> $('#demo1').wScratchPad({ size

HTML5模仿刮奖效果-页面涂抹消失插件wScratch

前言 HTML5的canvas有很多应用点,如绘画板.图形绘制.游戏交互.彩票刮刮乐等,除了这些,还有个比较好的点就是主页涂抹一部分之后,页面消失进入主要内容. wScratch是一个模拟刮刮卡的jQuery插件,可以设置刮开纯色或者图像. 演示 显示刮卡百分比 到达一定百分比清空 属性设置 可用的属性,以下是默认值 1 2 3 4 5 6 7 8 9 10 $('#elem').wScratchPad({ size        : 5,          // The size of the

android刮刮奖效果

自定义View盖在textView上 import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; impo

使用HTML5实现刮刮卡效果

原文地址:http://www.phpthinking.com/archives/525 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. 点击下载源码 HT

JS框架_(JQuery.js)模拟刮奖

纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl

Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

很久以前也过一个html5的刮刮卡效果~~上次看到有人写Android的刮刮卡效果~~于是乎产生了本篇博客~~此类例子也比较多了,大家可以百度看看~不过还是通过本例子,带大家发掘一下,里面隐含的知识~ 1.Xfermode以及PorterDuff 如果大家还记得,曾经在博客:完美实现图片圆角和圆形 简单介绍过圆角的实现原理也是基于这个. 首先我们看一下官方的例子,很好的展示了16种Mode的效果: 注:先绘制的Dst,再绘制的Src. 好了,看了这个图,我来问大家几个问题: 问题1.如果我想实现