问答详情
源自:2-5 矩形、覆盖和透明色

程序感觉没错,就是出不来矩形

<script type="text/javascript">

window.onload=function(){

var canvas=document.getElementById("canvas");

canvas.width=800;

canvas.height=800;

var context=canvas.getContext("2d");

drawRect(context,100,100,400,400,"#046","pink");

drawRect1(context,300,300,300,300,"#000","red");

drawRect2(context,400,400,300,300,"#abc","blue");

}

function drawRect(cxt,x,y,width,height,borderColor,fillColor){

cxt.beginPath();

cxt.moveTo(x,y);

cxt.lineTo(x+width,y);

cxt.lineTo(x+width,y+height);

cxt.lineTo(x,y+height);

cxt.closePath();

cxt.lineWidth = borderWidth;

cxt.fillStyle = fillColor;

cxt.strokeStyle = borderColor;

cxt.fill();

cxt.stroke();

}

function drawRect1(cxt,x,y,width,height,borderColor,fillColor){

cxt.beginPath();

cxt.rect(x,y,width,height);

cxt.closePath();

cxt.lineWidth=borderWidth;

cxt.fillStyle=fillColor;

cxt.strokeStyle=borderColor;

cxt.fill();

cxt.stroke();

}

function drawRect2(cxt,x,y,width,height,borderColor,fillColor){


cxt.lineWidth=borderWidth;

cxt.fillStyle=fillColor;

cxt.strokeStyle=borderColor;

cxt.fillRect(x,y,width,height);

cxt.strokeRect(x,y,width,height);

}

</script>


提问者:慕的地6791964 2017-04-07 21:42

个回答

  • pencil115
    2019-07-02 10:15:39

    应该这样:


    function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){


    cxt.beginPath();


    cxt.moveTo(x,y);


    cxt.lineTo(x+width,y);


    cxt.lineTo(x+width,y+height);


    cxt.lineTo(x,y+height);


    cxt.closePath();


    cxt.lineWidth = borderWidth;


    cxt.fillStyle = fillColor;


    cxt.strokeStyle = borderColor;


    cxt.fill();


    cxt.stroke();


    }


    调用:drawRect(context,100,100,400,400,10,"#046","pink");


  • pencil115
    2019-07-02 10:13:28

    drawRect里面 cxt.lineWidth = borderWidth; borderWidth 你没设值

  • Kuopa
    2017-04-08 20:09:37

    drawRect里面你没有写borderWidth及其值,你看看是不是