html5＜canvas操作像素实例之渐变＞

来源：互联网发布：it学校编辑：程序博客网时间：2024/06/05 13:26

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background:#eee;
            }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                // cobj.fillRect(0,0,100,100);
                // var newImgData = cobj.getImageData(0,0,100,100);
                // var imgData = cobj.createImageData(newImgData);
                // alert(imgData.width);//100,只是复制宽高
                // alert(imgData.data[0]);// 0
                // alert(imgData.data[0]);// 0
                // alert(imgData.data[0]);// 0
                // alert(imgData.data[0]);// 0

                var imgData = cobj.createImageData(100,100);
                // for(var i=0;i<imgData.width*imgData.height;i++){
                //     imgData.data[i*4+0] = 128+(i/(imgData.width*imgData.height))*(23-128);
                //     imgData.data[i*4+1] = 40+(i/(imgData.width*imgData.height))*(125-18);
                //     imgData.data[i*4+2] = 18+(i/(imgData.width*imgData.height))*(230-18);
                //     imgData.data[i*4+3] = 128+(i/(imgData.width*imgData.height))*(123-128);
                // }
                // cobj.putImageData(imgData, 100,100);
                Gradient(imgData,[123,32,24,99],[232,12,34,44]);
                //用像素画图形呈现渐变性，封装成函数
                function Gradient(imgObj,colorArr1,colorArr2){
                    for(var i=0;i<imgObj.width*imgObj.height;i++){
                        imgObj.data[i*4+0] = colorArr1[0]+(i/(imgObj.width*imgObj.height))*(colorArr2[0]-colorArr1[0]);
                        imgObj.data[i*4+1] = colorArr1[1]+(i/(imgObj.width*imgObj.height))*(colorArr2[1]-colorArr1[1]);
                        imgObj.data[i*4+2] = colorArr1[2]+(i/(imgObj.width*imgObj.height))*(colorArr2[2]-colorArr1[2]);
                        imgObj.data[i*4+3] = colorArr1[3]+(i/(imgObj.width*imgObj.height))*(colorArr2[3]-colorArr1[3]);
                    }
                    cobj.putImageData(imgObj, 100,100);
                    // return imgObj;
                }
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=500 height=500>
    </canvas>
    </body>

</html>

阅读全文

0 0