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

来源：3-9 填充与描边

慕斯0469344

2019-09-08 15:51:03

<!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.stroke();
    ctx.beginPath();
    ctx.moveTo(500,50);
    ctx.lineTo(420,200);
    ctx.stroke();
    ctx.strokeRect(300,200,200,100);
    ctx.beginPath();
    ctx.arc(350,230,12,0,2*Math.PI,true);
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(450,230,12,0,2*Math.PI,true);
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeRect(370,260,60,20);
    ctx.beginPath();
    ctx.strokeRect(280,220,20,40);
    ctx.beginPath();
    ctx.strokeRect(500,220,20,40);
    ctx.beginPath();
    ctx.strokeRect(350,300,100,220);
    ctx.beginPath();
    ctx.strokeRect(130,375,220,20);
    ctx.beginPath();
    ctx.strokeRect(450,375,220,20);
    ctx.beginPath();
    ctx.strokeRect(360,520,20,220);
    ctx.beginPath();
    ctx.strokeRect(410,520,20,220);
	</script>
</body>

</html>

老师，关于画这些许复杂的图形有比较简单的方法吗？

写回答

1回答