首页 > 代码库 > canvas放射渐变

canvas放射渐变

效果图

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>color</title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            #canvas{                background-color: #666666;            }        </style>    </head>    <body>        <canvas id="canvas" width="600" height="300">Canvas not supported</canvas>        <script type="text/javascript">            var canvas=document.getElementById(canvas);                context=canvas.getContext(2d);            var    gradient=context.createRadialGradient(300,150,0,300,150,300);                gradient.addColorStop(0,red);            gradient.addColorStop(0.25,blue);            gradient.addColorStop(0.5,black);            gradient.addColorStop(0.75,yellow);            gradient.addColorStop(1,green);            context.fillStyle=gradient;            context.fillRect(0,0,canvas.width,canvas.height);        </script>    </body></html>

 

技术分享

canvas放射渐变