html5 实例渐变

时间：2023-03-09 16:32:07
html5 实例渐变

代码实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实例</title>

    <script>

        window.onload=function() {

               var canvas=document.getElementById('canvas');

               var ctx=canvas.getContext('2d');

               //渐变的位置

                var colorObj=ctx.createLinearGradient(0,0,100,0);

                //颜色的变化

                colorObj.addColorStop(0,"blue");

                colorObj.addColorStop(1,"green");

                ctx.fillStyle= colorObj;

                 ctx.fillRect(0,0,100,100);

        ctx.putImageData(imgData,0,0);

        }

    </script>

</head>

<body>

<canvas  id="canvas" width="500"  height="500"></canvas>

</body>

</html>

　　效果：
html5 实例渐变

2017-09-12    09:51:31

相关文章