老师看下有没有需要优化的地方
来源：3-11 编程练习
菜鸟00001
2019-04-12 17:42:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document机器人</title>
<style type="text/css">
.myCanvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="myCanvas" class="myCanvas">
您当前浏览器不支持canvas，请升级您的浏览器版本
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 800;
ctx.canvas.height = 800;
ctx.beginPath();
//开始绘画
//绘制机器人天线
//左侧天线
ctx.strokeStyle="orange";
ctx.lineWidth=4;
ctx.moveTo(200,100);
ctx.lineTo(300,250);
ctx.stroke();
ctx.beginPath();
//右侧天线
ctx.moveTo(460,100);
ctx.lineTo(350,250);
ctx.stroke();
ctx.beginPath();
//脸部
ctx.fillStyle="#ffdab9";
ctx.fillRect(200,250,250,150);
ctx.stroke();
ctx.beginPath();
//左眼睛
ctx.fillStyle ="#000000";
ctx.arc(260,300,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
//右眼睛
ctx.fillStyle ="#000000";
ctx.arc(380,300,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
//嘴巴
ctx.fillStyle ="#ff0000";
ctx.fillRect(270,340,100,35);
ctx.beginPath();
//左耳朵
ctx.fillStyle ="#ffd700";
ctx.fillRect(170,300,30,60);
ctx.beginPath();
//右耳朵
ctx.fillStyle ="#ffd700";
ctx.fillRect(450,300,30,60);
ctx.beginPath();
//身体
ctx.fillStyle = "#ffb6c1";
ctx.fillRect(250,400,150,200);
ctx.beginPath();
//左臂
ctx.fillStyle ="#20b2aa";
ctx.fillRect(50,460,200,30);
ctx.beginPath();
//右臂
ctx.fillStyle ="#20b2aa";
ctx.fillRect(400,460,200,30);
ctx.beginPath();
//左腿
ctx.fillStyle ="#20b2aa";
ctx.fillRect(280,600,30,200);
ctx.stroke();
ctx.beginPath();
//右腿
ctx.fillStyle ="#020b2aa";
ctx.fillRect(340,600,30,200);
ctx.stroke();
ctx.beginPath();
</script>
</body>
</html>
1回答
-
你好同学 ,效果实现正确 , 继续加油 , 祝学习愉快 !
0
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1