• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

Html5 canvas绘制径向渐变图形

JavaScript 水墨上仙 2630次浏览

Html5 canvas绘制径向渐变图形

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>HTML5绘制径向渐变图形</title>
        <script type="text/javascript">
        window.onload = function()
        {
                        var canvas = document.getElementById("canvas");
                        var context = canvas.getContext("2d");
                        var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
                        g1.addColorStop(0.1, "rgb(255, 255, 0)");
                        g1.addColorStop(0.3, "rgb(255, 0, 255)");
                        g1.addColorStop(1, "rgb(0, 255, 255)");
                        context.fillStyle = g1;
                        context.fillRect(0, 0, 400, 350);
                        var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
                        g2.addColorStop(0.1, "rgba(255, 0, 0, 0.5)");
                        g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)");
                        g2.addColorStop(1, "rgba(0, 0, 255, 0.5)");
                        for(var i = 0; i < 10; i++)
                        {
                                context.beginPath();
                                context.fillStyle = g2;
                                context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
                                context.closePath();
                                context.fill();
                        }
                }
        </script>
    </head>
    <body>
            <canvas id="canvas" width="600" height="400"></canvas>
    </body>
</html>


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明Html5 canvas绘制径向渐变图形
喜欢 (0)
加载中……