麻烦老师检查下
来源：3-11 编程练习
Yuri沫
2020-04-22 15:12:32
<!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");
// head
ctx.fillStyle="#FFDEAD";
ctx.strokeStyle="#FFDEAD";
ctx.strokeRect(300,200,200,120);
ctx.fillRect(300,200,200,120);
// ears
ctx.fillStyle="yellow";
ctx.strokeStyle="yellow";
ctx.strokeRect(275,220,25,50);
ctx.fillRect(275,220,25,50);
ctx.strokeRect(500,220,25,50);
ctx.fillRect(500,220,25,50);
// mouse
ctx.fillStyle="red";
ctx.strokeStyle="red";
ctx.strokeRect(364,270,70,30);
ctx.fillRect(364,270,70,30);
// eyes
ctx.fillStyle="black";
ctx.strokeStyle="black";
ctx.arc(350,240,12,0,2*Math.PI,false);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.arc(450,240,12,0,2*Math.PI,false);
ctx.stroke();
ctx.fill();
// tianxian
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="orange";
ctx.moveTo(300,100);
ctx.lineTo(360,200);
ctx.moveTo(500,100);
ctx.lineTo(440,200);
ctx.stroke();
// body
ctx.lineWidth="1";
ctx.strokeStyle="pink";
ctx.fillStyle="pink";
ctx.strokeRect(340,320,120,200);
ctx.fillRect(340,320,120,200);
// arms
ctx.strokeStyle="#66CDAA";
ctx.fillStyle="#66CDAA";
ctx.strokeRect(140,390,200,20);
ctx.strokeRect(460,390,200,20);
ctx.fillRect(140,390,200,20);
ctx.fillRect(460,390,200,20);
// legs
ctx.strokeRect(370,520,20,200);
ctx.strokeRect(410,520,20,200);
ctx.fillRect(370,520,20,200);
ctx.fillRect(410,520,20,200);
</script>
</body>
</html>
1回答
-
同学你好，代码绘制效果很棒。继续加油，祝学习愉快！
0
