H5画布入门 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>
    <canvas height="300" width="500" id="PT"></canvas>
</body>
<script>

    let ptDom = document.getElementById('PT');
    ctx = ptDom.getContext('2d');
    // let imageData = {};
    // ctx.fillStyle = '#000';
    // ctx.fillRect(0, 0, ptDom.width, ptDom.height);

    var img = new Image()
    img.src = "./girl.jpg"
    img.onload = imgfn;//图片加载完在执行
    function imgfn() {
        ctx.drawImage(img, 0, 0)
        imageData = getData();
        setInterval(function () {
            drawParticle();
        }, 1000)

    }




    function drawText() {
        ctx.fillStyle = '#000';
        ctx.strokeStyle = '#fff';
        ctx.font = '50px Verdana';
        ctx.strokeText('Hello world', 80, 80);
        ctx.save();
    }
    function random() {
        return Math.random() * 255;
    }
    function getData() {
        return ctx.getImageData(0, 0, 500, 300);
    }
    function drawParticle() {
        console.log(imageData.data)
        for (let i = 0; i < imageData.data.length; i += 4) {
            let r = imageData.data[i];
            let g = imageData.data[i + 1];
            let b = imageData.data[i + 2];
            if (r || g || b) {

                imageData.data[i + 3] = 10; 
            }

        }
        ctx.putImageData(imageData, 0, 0);
    }

    drawText();


</script>

</html>

 

posted @ 2020-08-29 15:26  酷酷的城池  阅读(204)  评论(0)    收藏  举报