老师看下效果有没有需要完善的地方
来源：3-8 编程练习
菜鸟00001
2019-04-12 17:15:32
<!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.moveTo(200,100);
ctx.lineTo(300,250);
ctx.stroke();
ctx.beginPath();
//右侧天线
ctx.moveTo(460,100);
ctx.lineTo(350,250);
ctx.stroke();
ctx.beginPath();
//脸部
ctx.strokeRect(200,250,250,150);
ctx.stroke();
ctx.beginPath();
//左眼睛
ctx.arc(260,300,15,0,Math.PI*2,true);
ctx.stroke();
ctx.beginPath();
//右眼睛
ctx.arc(380,300,15,0,Math.PI*2,true);
ctx.stroke();
ctx.beginPath();
//嘴巴
ctx.strokeRect(270,340,100,35);
ctx.stroke();
ctx.beginPath();
//左耳朵
ctx.strokeRect(170,300,30,60);
ctx.stroke();
ctx.beginPath();
//右耳朵
ctx.strokeRect(450,300,30,60);
ctx.stroke();
ctx.beginPath();
//身体
ctx.strokeRect(250,400,150,200);
ctx.stroke();
ctx.beginPath();
//左臂
ctx.strokeRect(50,460,200,30);
ctx.stroke();
ctx.beginPath();
//右臂
ctx.strokeRect(400,460,200,30);
ctx.stroke();
ctx.beginPath();
//左腿
ctx.strokeRect(280,600,30,200);
ctx.stroke();
ctx.beginPath();
//右腿
ctx.strokeRect(340,600,30,200);
ctx.stroke();
ctx.beginPath();
</script>
</body>
</html>
1回答
-
你好，效果实现的特别棒，继续加油哦！
祝学习愉快！
0
相似问题
回答 1
回答 1
回答 1
回答 1
回答 2