找回密码
当前位置：前端开发者 > HTML > 正文

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

2018-12-20 分类：HTML 阅读(718) 评论(0)
前端微信公众号开发教程
微信公众众号需要前端开发吗
微信前端页面开发

最近被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>
前端微信公众号怎么开发的
前端开发 微信公众号
微信小程序前端开发编辑器
赞(0)
前端开发者 » 前端开发canvas刮刮卡特效 操作像素并结合算法
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论