62-JS-canvas画布高斯模糊之图像操作

将一张图片放到canvas画布上

1.绘制图像drawImage

    <img src="./3.webp" alt="">
    <canvas></canvas>
    <script>
        var canvas = document.getElementsByTagName("canvas")[0];
        canvas.width = 500;
        canvas.height = 500;
        var a  = canvas.getContext("2d");

        var img = document.getElementsByTagName("img")[0];
        //绘制图像,需要用内置服务器打开
                    //前四个值是在img做，后四个值是在canvas画布上做
        a.drawImage(img,100,100,300,300,0,0,200,200);
                    //从img上(100,100)的位置开始裁剪，裁剪的宽高大小是(300,300)
                    //把img按照原本的大小放在canvas画布(0,0)的位置
                    //(200,200)是img的宽高大小
    </script>

2.获取当前画布上各各像素点的数据的getImageData()

        var b = a.getImageData(10,10,50,50)
        //拿到的是一个矩形区域10,10的位置，50,5