HTML5学习笔记(一)canvas画图

 

效果图

 兼容ie的两个js库

<!--[if lte IE 9]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

画图代码,放在head里

function draw(id) {
              var ctx = document.getElementById(id).getContext('2d');
              
              // 画渐变背景设置渐变样式
              var g1 = ctx.createRadialGradient(200,200,0,200,200,200);
                    g1.addColorStop(0,'rgb(255,255,255)');
                  g1.addColorStop(1,'rgb(220,220,220)');
                  ctx.fillStyle =  g1;
                  ctx.fillRect(0,0,400,400);
                  
             // 中心点移动到(200,200) 
             ctx.translate(200,200);
              for (var i=1;i<6;i++){ 
                  
                // 保存当前状态
                ctx.save();
                
                // 设置当前颜色
                ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
            
                for (var j=0;j<i*6;j++)
                { 
                      // 旋转
                      ctx.rotate(Math.PI*2/(i*6));
                      
                      // 画圆
                      ctx.beginPath();
                      ctx.arc(0,i*30,8,0,Math.PI*2,true);
                      ctx.fill();
                }
                
                // 返回上次保存状态
                ctx.restore();
              }
        }

 

执行代码

window.onload = function()
        {
            draw("myCanvas");
        }

 

HTML代码

<canvas id="myCanvas" width="400" height="400"></canvas>