繪製帶填充顏色和單獨邊框的矩形

如何繪製填充顏色和每邊4種不同邊框顏色的畫布矩形？繪製帶填充顏色和單獨邊框的矩形

2013-09-30 Elisabeth

您可以添加到canvas.context一種新的方法，吸引了您的多彩色矩形

enter image description here

您可以通過它的原型定義在canvas.context的新方法：

CanvasRenderingContext2D.prototype.myNewMethod = function(){ ... };

在新方法中，您可以使用任何上下文繪圖命令來繪製所需的形狀。

注意裏面myNewMethod，「這」指的是canvas.context，所以你得出這樣的：

this.lineTo(x,y) // not context.lineTo

你看中的矩形是一個相當簡單的圖紙，除了斜接側杆。

每一側一筆寫成一個充滿梯形：

function trapezoid(context,color,x1,y1,x2,y2,x3,y3,x4,y4){ 
    context.beginPath(); 
    context.moveTo(x1,y1); 
    context.lineTo(x2,y2); 
    context.lineTo(x3,y3); 
    context.lineTo(x4,y4); 
    context.closePath(); 
    context.fillStyle=color; 
    context.fill(); 
}

你看中的新矩形法（rainbowRect）被調用，就像context.fillRect。

context.rainbowRect(100,100,100,50,"gold","red","blue","green","purple");

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/Nfs9R/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 


    // Add a rainboxRect function to the context prototype 
    // This method is used alone like context.fillRect 
    // This method is not used within a context.beginPath 
    // NOTE: this addition must always be run before it is used in code 
    CanvasRenderingContext2D.prototype.rainbowRect = function (x,y,w,h,fillColor,tColor,rColor,bColor,lColor){ 

     // use existing fillStyle if fillStyle is not supplied 
     fillColor=fillColor||this.fillStyle; 

     // use existing strokeStyle if any strokeStyle is not supplied 
     var ss=this.strokeStyle; 
     tColor=tColor||ss; 
     rColor=rColor||ss; 
     bColor=bColor||ss; 
     lColor=lColor||ss; 


     // context will be modified, so save it 
     this.save(); 

     // miter the lines 
     this.lineJoin="miter"; 

     // helper function: draws one side's trapzoidal "stroke" 
     function trapezoid(context,color,x1,y1,x2,y2,x3,y3,x4,y4){ 
      context.beginPath(); 
      context.moveTo(x1,y1); 
      context.lineTo(x2,y2); 
      context.lineTo(x3,y3); 
      context.lineTo(x4,y4); 
      context.closePath(); 
      context.fillStyle=color; 
      context.fill(); 
     } 

     // context lines are always drawn half-in/half-out 
     // so context.lineWidth/2 is used a lot 
     var lw=this.lineWidth/2; 

     // shortcut vars for boundaries 
     var L=x-lw; 
     var R=x+lw; 
     var T=y-lw; 
     var B=y+lw; 

     // top 
     trapezoid(this,tColor, L,T, R+w,T, L+w,B, R,B); 

     // right 
     trapezoid(this,rColor, R+w,T, R+w,B+h, L+w,T+h, L+w,B); 

     // bottom 
     trapezoid(this,bColor, R+w,B+h, L,B+h, R,T+h, L+w,T+h); 

     // left 
     trapezoid(this,lColor, L,B+h, L,T, R,B, R,T+h); 

     // fill 
     this.fillStyle=fillColor; 
     this.fillRect(x,y,w,h); 

     // be kind -- always rewind (old vhs reference!) 
     this.restore(); 
     // don't let this path leak 
     this.beginPath(); 
     // chain 
     return(this); 
    }; 


    //testing 
    ctx.lineWidth=20; 
    ctx.rainbowRect(100,100,100,50,"gold","red","blue","green","purple"); 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2013-09-30 18:40:17 markE

不幸的是，你不能像使用css一樣繪製矩形的邊框。您可以使用stroke（）方法，但它會爲每個邊繪製一個顏色的「邊框」。所以，我想，你可以通過在矩形附近畫線來手動繪製邊框。

來源

2013-09-30 10:06:21

繪製帶填充顏色和單獨邊框的矩形

回答

相關問題