问答详情
源自：2-4 多边形的填充和closePath

为什么运行出来是黑色的，都找了一周的问题

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css"></style>
</head>
<body>
    <canvas id="canvas"style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
    <script>
        window.onload=function(){
            var canvas=document.getElementById("canvas");
            canvas.height=768;
            canvas.width=1024;
            var context=canvas.getContext("2d");

            drawRect(context,100,100,400,400,20,"green","red");

        }

        function drawRect(cxt,x,y,width,height,borderWidth,borerColor,fillColor){
            cxt.beginPath();
            cxt.moveTo(x,y);
            cxt.lineTo(x + width,y);
            cxt.lineTo(x + width,y + height);
            cxt.lineTo(x,y + height);
            cxt.lineTo(x,y);
            cxt.closePath();
            
            cxt.lineWidth="borderWidth";
            cxt.fillStyle="fillColor";
            cxt.strokeStyle="borerColor";

            
            cxt.fill();
            cxt.stroke();
        }
        
    </script>
</body>
</html>


http://img.mukewang.com/5610bd630001d61415560984.jpg

提问者：逆向的艺术 2015-10-04 13:49

个回答

  • Y_du
    2015-10-04 17:15:11
    已采纳 

    cxt.fillStyle=fillColor;
cxt.strokeStyle=borerColor;

    fillColor和borerColor是变量，不能用引号。

    0
  • Y_du
    2015-10-04 17:17:07

    cxt.lineWidth=borderWidth;

    这个也是相同的问题

    0
  • 逆向的艺术
    2015-10-04 14:08:51

    真的是完全检测不出bug，好忧伤

    0