Html5学习------canvas绘制径向渐变图形

[htML] 
!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>  

[html] 
!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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！