求用canvas写这样一个不规则区域，并填充颜色！！！

Question

Answer 1

以下是我用canvas绘制的填充圆角矩形图，你这个图实际上可以绘制。我绘制的是横向四个角都是有弧度，你可以仅设置两个角有弧度即可，填充色可以设置为从上到下，
先放效果图：

/**该方法用来绘制一个有填充色的圆角矩形 
     *@param cxt:canvas的上下文环境 
     *@param x:左上角x轴坐标 
     *@param y:左上角y轴坐标 
     *@param width:矩形的宽度 
     *@param height:矩形的高度 
     *@param radius:圆的半径 
     *@param fillColor:填充颜色 
     **/
    function fillRoundRect(cxt,x, y, width, height, radius, fillColor,cname) {
        //圆的直径必然要小于矩形的宽高          
        if (2 * radius > width || 2 * radius > height) { return false; }

        var grd=ctx.createLinearGradient(0,0,width,height);
        grd.addColorStop(0,fillColor[0]);
        grd.addColorStop(1,fillColor[1]);

        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边  
        drawRoundRectPath(cxt, width, height, radius);
        cxt.fillStyle = grd; //若是给定了值就用给定的值否则给予默认值  
        cxt.fill();
        cxt.restore();

        //绘制文字
        cxt.font=_font;
        ctx.fillStyle ="#fff"
        cxt.fillText(!cname?'':cname,x+20,y);
        
    }

function drawRoundRectPath(cxt, width, height, radius) {
        cxt.beginPath(0);
        //从右下角顺时针绘制，弧度从0到1/2PI  
        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

        //矩形下边线  
        cxt.lineTo(radius, height);

        //左下角圆弧，弧度从1/2PI到PI  
        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

        //矩形左边线  
        cxt.lineTo(0, radius);

        //左上角圆弧，弧度从PI到3/2PI  
        cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

        //上边线  
        cxt.lineTo(width - radius, 0);

        //右上角圆弧  
        cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

        //右边线  
        cxt.lineTo(width, height - radius);
        cxt.closePath();
    }

Answer 2

其实你可以考虑叠加，看上去就是一个矩形上面盖了一个梯形。

单纯布局的话，纯 css 都可以叠加的。

---

cavnas 里面是支持路径的，其实也就是任意图形。简单给你画了个梯形

Answer 3

最省事儿的方法就是直接切背景图