效果图

 兼容ie的两个js库

 

画图代码,放在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

 

执行代码

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

 

HTML代码