HTML用JS画图形

H5中有画布(Canvans), 可在使用JS在画布上面绘制图形:

//画制一个矩形

        //先得到画布 
  
       var canvas 
   = document. 
   getElementById( 
   'lookwhatidrew'); 
  
        //创建一个可以绘制2d图形的上下文 
   
   var context 
   = canvas. 
   getContext( 
   '2d');

//画制一个矩形

      //图形填充颜色 
  
        context.fillStyle 
   = bgColor; 
  
        //绘制一个矩形 
   
        context. 
   fillRect( 
   0, 
   0,canvas.width,canvas.height);

//绘制一个圆形

 
   //画一圆形 
  
   function 
   drawCirlce( 
   canvas, 
   context) { 
  
   var radius 
   = 
   Math. 
   floor( 
   Math. 
   random() 
   * 
   40); 
  
   var x 
   = 
   Math. 
   floor( 
   Math. 
   random() 
   *canvas.width); 
  
   var y 
   = 
   Math. 
   floor( 
   Math. 
   random() 
   *canvas.height); 
  
        //开始绘制 
   
        context. 
   beginPath(); 
  
        //路径 
   
        context. 
   arc(x,y,radius, 
   0, 
   degreesToRadians( 
   360), 
   true); 
  
        //填充颜色 
   
        context.fillStyle 
   = 
   "lightblue"; 
  
        //结束绘制 
   
        context. 
   fill(); 
  
    }   
  
     // 通过角度计算弧度 
    
     function 
     degreesToRadians( 
     degrees) { 
    
     return (degrees 
     * 
     Math. 
     PI) 
     / 
     180; 
    
      }   
    
     context. 
     arc(x,y,radius, startAngle,endAngle,direcetion)  
    
     方法: x,y 是圆心;radius 是半径; direction: true逆时针创建圆,false 顺时针创建圆 
    
     startAngle:弧的起始角; 
    
     endAngle:弧的终止角

 
   // 通过角度计算弧度 
  
   function 
   degreesToRadians( 
   degrees) { 
  
   return (degrees 
   * 
   Math. 
   PI) 
   / 
   180; 
  
    }

endAngle

猜你喜欢