canvas圖片操作/canvas像素級操作/canvas視頻(video)操作

canvas圖片操作

    圖片動畫,一條游動的魚
    //核心代碼
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style media="screen">
            body {background:black; text-align:center;}
            #c1 {background:white;}
            </style>
            <script>
            window.onload=function (){
            let oC=document.getElementById('c1');
            let gd=oC.getContext('2d');

            let pause=false;//控制是否暫停游動,默認是否
            let i=0;//圖片下標
            let x=100;//默認起始位置
            let frameCounter=0;//動畫計數器

            let oImg=new Image();
            oImg.src='fish1.png';//一張游動的魚,行走圖
            oImg.onload=function (){
                requestAnimationFrame(next);//調用幀動畫
                function next(){
                if(!pause){//如果沒有暫停
                    gd.clearRect(0, 0, oC.width, oC.height);//清除原圖片

                    if(frameCounter%4==0){//動畫計數器,用來控制動畫頻率
                        i++;//切換圖片
                        if(i==4)i=0;//超過第四張圖片就回到第一張
                    }

                    x+=1.5;//魚的位置+1.5,向前進
                    //畫魚,連續切換行走圖,實現原地游動,x++實現向前游動
                    gd.drawImage(
                    oImg,
                    //sx, sy, sw, sh
                    0, i*37, 55, 37,
                    //dx, dy, dw, dh
                    x, 100, 55, 37
                    );

                    frameCounter++;//計數器++
                }

                requestAnimationFrame(next);//遞歸調用幀動畫
                }
            };

            document.onclick=function (){
                pause=!pause;//控制點擊暫停
            };
            };
            </script>
        </head>
        <body>
            <canvas id="c1" width="800" height="600"></canvas>
        </body>
    </html>

canvas像素級操作

        window.onload=function (){
        let oC=document.getElementById('c1');
        let gd=oC.getContext('2d');
        let W=oC.width,H=oC.height;
        let oImg=new Image();
        oImg.src='http://localhost/2018-3-20/2.jpg';
        oImg.onload=function (){
            gd.drawImage(oImg, 0, 0);
            let imageData=gd.getImageData(0, 0, W, H);
            let data=imageData.data;
            for(let r=0;r<H;r++){
            for(let c=0;c<W;c++){
                //(r*W+c)*4 行*寬+列可以得到像素點,*4得到RGBA
                //(r*W+c)*4+0       =>    r
                //(r*W+c)*4+1       =>    g
                //(r*W+c)*4+2       =>    b
                //(r*W+c)*4+3       =>    a
                data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
                1.0*(data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;//除以3得到平均值,就是灰色,乘以倍數即可提高亮度
            }
            }
            gd.putImageData(imageData, 0, 0);
        };
        };

canvas視頻(video)操作

    <script>
        window.onload=function (){
        let oV=document.getElementById('v1');
        let oC=document.getElementById('c1');
        let gd=oC.getContext('2d');

        let W=oC.width,H=oC.height;

        requestAnimationFrame(next);

        function next(){
            gd.drawImage(oV, 0, 0);

            //
            let imageData=gd.getImageData(0, 0, W, H);
            let data=imageData.data;

            for(let r=0;r<H;r++){
            for(let c=0;c<W;c++){
                data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
                (data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
            }
            }
            gd.putImageData(imageData, 0, 0);
            requestAnimationFrame(next);
        }
        };
    </script>
    </head>
    <body>
        <video src="movie.ogg" id="v1" autoplay loop style="display:none;"></video>
        <canvas id="c1" width="320" height="240"></canvas>
    </body>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容