老师，帮我看看有优化的地方吗

来源：3-8 编程练习

广东靓仔

2019-08-26 13:27:23

<!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.strokeRect(280,200,250,150);
// 左天线
ctx.moveTo(360,200);
ctx.lineTo(280,50);
ctx.stroke();
// 右天线
ctx.beginPath();
ctx.moveTo(450,200);
ctx.lineTo(530,50);
ctx.stroke();
// 左眼睛
ctx.beginPath();
ctx.arc(340,250,15,0,2*Math.PI,true);
ctx.stroke();
// 右眼睛
ctx.beginPath();
ctx.arc(470,250,15,0,2*Math.PI,true);
ctx.stroke();
// 嘴巴
ctx.beginPath();
ctx.strokeRect(355,290,100,30);
// 耳朵
ctx.beginPath();
ctx.strokeRect(250,230,30,55);
ctx.strokeRect(530,230,30,55);
//肚子
ctx.beginPath();
ctx.strokeRect(325,350,160,210);
// 手
ctx.beginPath();
ctx.strokeRect(75,400,250,25);
ctx.strokeRect(485,400,250,25);
// 脚
ctx.beginPath();
ctx.strokeRect(340,560,25,180);
ctx.strokeRect(445,560,25,180);
    </script>
</body>
</html>

写回答

1回答