CANVAS绘制圆弧

最新推荐文章于 2024-11-01 18:12:34 发布

Sunyiban

最新推荐文章于 2024-11-01 18:12:34 发布

阅读量494

点赞数

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/u011594442/article/details/47250771

版权

HTML5 专栏收录该内容

8 篇文章

订阅专栏

绘制矩形圆角：

 
      <!DOCTYPE html> 
     
      < 
      html 
      > 
     
      < 
      head 
      > 
     
      < 
      title 
      >rect 
     
      </ 
      title 
      > 
     
      < 
      style 
      > 
     
      body{ 
     
      background: #eeeeee; 
     
      } 
     
      #canvas{ 
     
      background: #ffffff; 
     
      } 
     
      </ 
      style 
      > 
     
      </ 
      head 
      > 
     
      < 
      body 
      > 
     
      < 
      canvas  
      id 
      = 
      "canvas"  
      width 
      = 
      "600"  
      height 
      = 
      "400" 
      > 
     
      Canvas not supported 
     
      </ 
      canvas 
      > 
     
      < 
      script  
      src 
      = 
      "chapetal2.js" 
      ></ 
      script 
      > 
     
      </ 
      body 
      > 
     
      </ 
      html 
      >

 
      var  
      canvas = document.getElementById( 
      "canvas" 
      ), 
     
      context = canvas.getContext( 
      "2d" 
      ); 
     
      function  
      roundedRect(cornerX, cornerY, width, height, cornerRadius){ 
     
      if 
      (width >0) context.moveTo(cornerX + cornerRadius, cornerY); 
     
      else          
      context.moveTo(cornerX - cornerRadius, cornerY); 
     
      context.arcTo(cornerX + width, cornerY, 
     
      cornerX + width, cornerY + height, 
     
      cornerRadius); 
     
      context.arcTo(cornerX + width, cornerY + height, 
     
      cornerX, cornerY + height, 
     
      cornerRadius); 
     
      context.arcTo(cornerX, cornerY + height, 
     
      cornerX, cornerY, 
     
      cornerRadius); 
     
      if 
      (width > 0){ 
     
      context.arcTo(cornerX, cornerY, 
     
      cornerX + cornerRadius, cornerY, 
     
      cornerRadius); 
     
      } 
      else 
      { 
     
      context.arcTo(cornerX, cornerY, 
     
      cornerX - cornerRadius, cornerY, 
     
      cornerRadius); 
     
      } 
     
      } 
     
      function  
      drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY, 
     
      width, height, cornerRadius){ 
     
      context.beginPath(); 
     
      roundedRect(cornerX, cornerY, width, height, cornerRadius); 
     
      context.strokeStyle = strokeStyle; 
     
      context.fillStyle = fillStyle; 
     
      context.stroke(); 
     
      context.fill(); 
     
      } 
     
      drawRoundedRect( 
      'blue' 
      ,      
      'yellow' 
      ,   50,     40,     100,    100, 10); 
     
      drawRoundedRect( 
      'purple' 
      ,    
      'green' 
      ,    275,    40,     -100,   100, 20); 
     
      drawRoundedRect( 
      'red' 
      ,       
      'white' 
      ,    300,    140,    100,    -100, 30); 
     
      drawRoundedRect( 
      'white' 
      ,     
      'blue' 
      ,     525,    140,    -100,   -100, 40);