前端开发canvas刮刮卡特效 操作像素并结合算法

前端微信公众号开发教程
微信公众众号需要前端开发吗
微信前端页面开发

最近被canvas觅得神魂颠倒 并对其原理十分着迷 其中的属性像一块块的积木 可以发挥了我们最大的创造性,着实实现了我贴近艺术的梦想,话说我的爱好就是画画哇哈哈哈哈哈,今天做了一个实用的特效———刮刮卡(canvas自适应图片大小),电商网站或做彩票的朋友maybe会用到哦。注意:我要开始装逼了!
1.核心就是用到了globalCompositeOperation这个属性,
2.画出绘图区域,上层遮罩变得透

明,
3.然后分析像素rgba的值(0,0,0,0),
4.如果超过60%的像素值为透明 则优惠券全部显示哦
是不是很简单呢 如果你想换图 直接改图片路径,要是要随机 用Math.random改图片地址 我想你懂的~~~

html 代码

<!DOCTYPE html>
    <head>
        <title></title>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            canvas {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <img src=”images/sale.jpg” id=”img1″ />
        <canvas width=”600″ height=”600″ id=”canvas”
            >您的浏览器不支持canvas</canvas
        >
        <script type=”text/javascript”>
            var img = document.getElementById(‘img1’)
            img.onload = draw
            function draw() {
                var canvas = document.getElementById(‘canvas’)
                canvas.width = img.width
                canvas.height = img.height
                var ctx = canvas.getContext(‘2d’)
                ctx.beginPath()
                ctx.fillStyle = ‘#ccc’
                ctx.fillRect(0, 0, canvas.width, canvas.width)
                ctx.globalCompositeOperation = ‘destination-out’
                ctx.lineWidth = 50
                ctx.lineCap = ’round’
                ctx.lineJoin = ’round’
                ctx.strokeStyle = ‘green’
                canvas.onmousedown = function(ev) {
                    var _this = this
                    var ev = ev || window.event
                    var pX = ev.pageX – canvas.offsetTop
                    var pY = ev.pageY – canvas.offsetLeft
                    ctx.beginPath()
                    ctx.moveTo(pX, pY)
                    _this.onmousemove = function(ev) {
                        var ev = ev || window.event
                        var pX = ev.pageX – canvas.offsetTop
                        var pY = ev.pageY – canvas.offsetLeft
                        ctx.lineTo(pX, pY)
                        ctx.stroke()
                    }
                    _this.onmouseup = function() {
                        _this.onmousemove = null
                        check()
                    }
                }
                canvas.onmouseup = null
                function check() {
                    var data = ctx.getImageData(
                        0,
                        0,
                        canvas.width,
                        canvas.height,
                    ).data
                    var sum = 0
                    var temp = 0
                    for (var i = 0; i <= data.length; i = i + 4) {
                        if (
                            data[i] == 0 &&
                            data[i + 1] == 0 &&
                            data[i + 2] == 0 &&
                            data[i + 4] == 0
                        ) {
                            sum++
                        }
                    }
                    temp = (
                        (sum * 100) /
                        (canvas.width * canvas.height)
                    ).toFixed(2)
                    if (temp > 60) {
                        ctx.beginPath()
                        ctx.fillRect(0, 0, canvas.width, canvas.height)
                    }
                }
            }
        </script>
    </body>
</html>
前端微信公众号怎么开发的
前端开发 微信公众号
微信小程序前端开发编辑器
» 本文来自:前端开发者 » 《前端开发canvas刮刮卡特效 操作像素并结合算法》
» 本文链接地址:https://www.rokub.com/7204.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!