麻烦老师检查，谢谢
来源：3-11 编程练习
qq_慕移动3101913
2020-02-27 23:40:58
<!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');
//知识点：
//1：lineWidth 设置描边的线宽
//2：strokeStyle 设置描边样式
//3：fillStyle 设置填充样式(填充圆形)（必须使用：ctx.fill();）
//4：填充矩形 fillRec(100,200,100,100); 参数是x,y,宽高
//左天线
ctx.moveTo(270,50);
ctx.lineTo(350,180);
ctx.lineWidth = 5;
ctx.strokeStyle = 'orange';
ctx.stroke();
//右天线
ctx.beginPath(); //清除之前的路径，重新开始新的路径
ctx.moveTo(520,50);
ctx.lineTo(430,180);
ctx.stroke();
//头
ctx.beginPath();
// ctx.strokeRect(270,180,240,140); /将边框去掉
ctx.fillStyle = '#ffdab9';
ctx.fillRect(270,180,240,140);
//左耳朵
ctx.restore();
ctx.beginPath();
// ctx.strokeRect(240,220,30,50);
ctx.fillStyle = '#ffd700';
ctx.fillRect(240,220,30,50);
//右耳朵
ctx.beginPath();
// ctx.strokeRect(510,220,30,50);
ctx.fillStyle = '#ffd700';
ctx.fillRect(510,220,30,50);
//左眼睛
ctx.restore();
ctx.beginPath();
ctx.arc(330,230,20,0,2*Math.PI,true);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
// //右眼睛
ctx.beginPath();
ctx.arc(450,230,20,0,2*Math.PI,true);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
//嘴巴
ctx.beginPath();
// ctx.strokeRect(350,270,80,30);
ctx.fillStyle = '#ff0000';
ctx.fillRect(350,270,80,30);
//身体
ctx.beginPath();
// ctx.strokeRect(310,320,160,200);
ctx.fillStyle = '#ffb6c1';
ctx.fillRect(310,320,160,200);
//左手
ctx.beginPath();
// ctx.strokeRect(70,380,240,30);
ctx.fillStyle = '#20b2aa';
ctx.fillRect(70,380,240,30);
//右手
ctx.beginPath();
// ctx.strokeRect(470,380,240,30);
ctx.fillStyle = '#20b2aa';
ctx.fillRect(470,380,240,30);
//左腿
ctx.beginPath();
// ctx.strokeRect(340,520,35,200);
ctx.fillStyle = '#20b2aa';
ctx.fillRect(340,520,35,200);
//右腿
ctx.beginPath();
// ctx.strokeRect(410,520,35,200);
ctx.fillStyle = '#20b2aa';
ctx.fillRect(410,520,35,200);
</script>
</body>
</html>写回答
2回答
-
同学你好，修改之后的代码测试效果没有问题，很棒！
祝学习愉快！
0 -
qq_慕移动3101913
提问者
2020-02-27
修正：
ctx.save();
//左天线
ctx.moveTo(270,50);
ctx.lineTo(350,180);
ctx.lineWidth = 5;
ctx.strokeStyle = 'orange';
ctx.stroke();
//右天线
ctx.beginPath(); //清除之前的路径，重新开始新的路径
ctx.moveTo(520,50);
ctx.lineTo(430,180);
ctx.stroke();
ctx.restore();
0
