按老师照抄，为何不显示，各位大神帮看一看

源自：6-1 arc()，圆弧和圆角矩形

按老师照抄，为何不显示，各位大神帮看一看

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" style ="divplay:black;margin:0 auto;border:1px solid #aaa;">
        当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>
<script>
    window.onload = function(){
    var canvas=document.getElementById('canvas');

    canvas.width=800;
    canvas.height=800;
    var ctx=canvas.getContext("2d");
    drawRoundRect(context,100,100,600,500,50);
    }

function drawRoundRect(cxt,x,y,width,height,r,) {

        cxt.save();
        cxt.translate(x, y);
        pathRoundRect(cxt,width,height,r);
        cxt.strokeStyle ="black";
        cxt.stroke();
        cxt.restore();
    }

function pathRoundRect(cxt,width,height,r) {
        cxt.beginPath();
       cxt.arc(width-r,heigh r, r, 0,Math.PI/2 );
        cxt.lineTo(r, height);
        cxt.arc(r, height-r, r, Math.PI/2, Math.PI);
        cxt.lineTo(0,r);
        cxt.arc(r, r, r, r.Math.PI, Math.PI*3/2);
        cxt.lineTo(width-r, 0);
        cxt.arc(width-r, r, r, Math.PI*3/2, Math.PI*2);
        cxt.closePath();
    }
</script>
</body>
</html>

提问者：慕粉4042427 2016-12-07 21:50

个回答

等待下一个约定

2016-12-08 17:39:02

已采纳

你那上面的代码var ctx=canvas.getContext("2d");明明是ctx,drawRoundRect(context,100,100,600,500,50); 你传的参数是context肯定不行呀

0
大学霸

2018-01-08 15:31:48

很多书写上的错误，建议仔细检查下

0