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

心已赠人 2022-06-15 07:27 186阅读 0赞

<!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>

![Image 1][]![Center][]

[Image 1]: 
[Center]: /images/20220615/9f0b5adba6ff4671931eb7e634361e77.png