老师，我的问题是本节的3-11编程练习。

来源：3-11 编程练习

慕斯0469344

2019-09-09 19:51:26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800">
        您的浏览器不支持canvas
    </canvas>
    
    <script>
    //在此处写出代码
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //左边天线
    ctx.moveTo(300,50);
    ctx.lineTo(370,200);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#ffff00';
    ctx.stroke();
    // 右侧天线
    ctx.beginPath();
    ctx.moveTo(500,50);
    ctx.lineTo(420,200);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#ffff00';
    ctx.stroke();

    // 脸部
    ctx.beginPath();
    ctx.strokeRect(300,200,200,100);
    ctx.fillStyle = '#ffffcc';
    ctx.fillRect(300,200,200,100);
    ctx.fill();
    // 左侧眼睛
    ctx.beginPath();
    ctx.arc(350,230,12,0,2*Math.PI,true);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.stroke();
    // 右侧眼睛
    ctx.beginPath();
    ctx.arc(450,230,12,0,2*Math.PI,true);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.stroke();
    // 嘴巴
    ctx.beginPath();
    ctx.strokeRect(370,260,60,20);
    ctx.fillStyle = '#f00';
    ctx.fillRect(370,260,60,20);
    ctx.fill();
    // 左侧耳朵
    ctx.beginPath();
    ctx.strokeRect(280,220,20,40);
    ctx.fillStyle = '#ffff00'; 
    ctx.fillRect(280,220,20,40);
    ctx.fill();
    // 右侧耳朵
    ctx.beginPath();
    ctx.strokeRect(500,220,20,40);
    ctx.fillStyle = '#ffff00';
    ctx.fillRect(500,220,20,40);
    ctx.fill();
    //身体
    ctx.beginPath();
    ctx.strokeRect(350,300,100,220);
    ctx.fillStyle = '#ffcccc';
    ctx.fillRect(350,300,100,220);
    ctx.fill();

    
    // 左臂
    ctx.beginPath();
    ctx.strokeRect(130,375,220,20);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(130,375,220,20);
    ctx.fill();
    // 右臂
    ctx.beginPath();
    ctx.strokeRect(450,375,220,20);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(450,375,220,20);
    ctx.fill();
    // 左腿
    ctx.beginPath();
    ctx.strokeRect(360,520,20,220);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(360,520,20,220);
    ctx.fill();
    // 右腿
    ctx.beginPath();
    ctx.strokeRect(410,520,20,220);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(410,520,20,220);
    ctx.fill();
    
    
	</script>
</body>

</html>

老师，您看我的图形为什么带着黄色的边框啊，但是我每个前面都写ctx.beginPath()了啊。

写回答

1回答

好帮手慕星星

2019-09-10

已采纳

同学你好，

beginPath只是开启新路径，并不会重新开启颜色哦。

是因为每个部分绘制了边框，所以有开始边框的颜色，可以将边框去掉哦，参考修改：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
    canvas {
        background-color: lightblue;
    }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="800">
        您的浏览器不支持canvas
    </canvas>
    <script>
    //在此处写出代码
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //左边天线
    ctx.moveTo(300, 50);
    ctx.lineTo(370, 200);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#ffff00';
    ctx.stroke();
    // 右侧天线
    ctx.beginPath();
    ctx.moveTo(500, 50);
    ctx.lineTo(420, 200);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#ffff00';
    ctx.stroke();

    // 脸部
    ctx.beginPath();
    // ctx.strokeRect(300, 200, 200, 100);
    ctx.fillStyle = '#ffffcc';
    ctx.fillRect(300, 200, 200, 100);
    ctx.fill();
    // 左侧眼睛
    ctx.beginPath();
    ctx.arc(350, 230, 12, 0, 2 * Math.PI, true);
    ctx.fillStyle = '#000';
    ctx.fill();
    // ctx.stroke();
    // 右侧眼睛
    ctx.beginPath();
    ctx.arc(450, 230, 12, 0, 2 * Math.PI, true);
    ctx.fillStyle = '#000';
    ctx.fill();
    // ctx.stroke();
    // 嘴巴
    ctx.beginPath();
    // ctx.strokeRect(370, 260, 60, 20);
    ctx.fillStyle = '#f00';
    ctx.fillRect(370, 260, 60, 20);
    ctx.fill();
    // 左侧耳朵
    ctx.beginPath();
    // ctx.strokeRect(280, 220, 20, 40);
    ctx.fillStyle = '#ffff00';
    ctx.fillRect(280, 220, 20, 40);
    ctx.fill();
    // 右侧耳朵
    ctx.beginPath();
    // ctx.strokeRect(500, 220, 20, 40);
    ctx.fillStyle = '#ffff00';
    ctx.fillRect(500, 220, 20, 40);
    ctx.fill();
    //身体
    ctx.beginPath();
    // ctx.strokeRect(350, 300, 100, 220);
    ctx.fillStyle = '#ffcccc';
    ctx.fillRect(350, 300, 100, 220);
    ctx.fill();


    // 左臂
    ctx.beginPath();
    // ctx.strokeRect(130, 375, 220, 20);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(130, 375, 220, 20);
    ctx.fill();
    // 右臂
    ctx.beginPath();
    // ctx.strokeRect(450, 375, 220, 20);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(450, 375, 220, 20);
    ctx.fill();
    // 左腿
    ctx.beginPath();
    // ctx.strokeRect(360, 520, 20, 220);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(360, 520, 20, 220);
    ctx.fill();
    // 右腿
    ctx.beginPath();
    // ctx.strokeRect(410, 520, 20, 220);
    ctx.fillStyle = '#00cccc';
    ctx.fillRect(410, 520, 20, 220);
    ctx.fill();
    </script>
</body>

</html>

自己测试下，祝学习愉快！

0 学习 · 6815 问题

查看课程

相似问题

回答 3

回答 1

回答 1

回答 1

回答 1