【Canvas技巧】用渐变色绘制太阳

【效果图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>渐变色画太阳</title>
     </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="1200px" height="512px" style="border:0px dashed black;">
            出现文字表示您的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// 常量画布宽
const Width=1200;

// 常量画布高
const Height=512;

// 肇始函数
function draw(){
    var canvas=document.getElementById('myCanvus');    
    canvas.width=Width;
    canvas.height=Height;    

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

    // 背景黑色
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,Width,Height);

    // 画圆表示太阳
    ctx.beginPath();
    ctx.arc(Width/2,Height/2,100,0,Math.PI*2,true);
    ctx.closePath();

    // 用内黄外橙的渐变色填充太阳
    var sunColor=ctx.createRadialGradient(Width/2,Height/2,0,Width/2,Height/2,100);
    sunColor.addColorStop(0,"#ff0");// 黄色
    sunColor.addColorStop(1,"#f90");// 橙色
    ctx.fillStyle=sunColor;
    ctx.fill();
};


/*----------------------------------
人自卑，一到大场面就胆怯畏缩，
是没明白一个道理，
所有的淡定自若背后必定是熟能生巧
----------------------------------*/
//-->
</script>