Question

如何绘制填充颜色和每边4种不同边框颜色的画布矩形？

Answer 1

您可以向canvas.context添加一个新方法来绘制多色矩形

enter image description here

您可以通过它的原型在canvas.context上定义一个新方法：

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

在新方法中，您可以使用任何上下文绘制命令来绘制所需的形状。

请注意，在myNewMethod中，“this”指的是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>

Answer 2

不幸的是，你无法像使用css一样绘制矩形的边框。你可以使用stroke（）方法，但它只为每一面绘制一个颜色的“边框”。所以，我想，你可以通过在矩形附近画线来手动绘制边框。

绘制带填充颜色和单个边框的矩形

2 个答案: