老师 您好 帮我看看效果吧
来源：3-8 编程练习
小虾虾小
2019-11-06 15:56:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas3-8</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800">
您的浏览器不支持canvas
</canvas>
<script>
//在此处写出代码
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
// 头发
ctx.moveTo(350,200);
ctx.lineTo(250,50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(450,200);
ctx.lineTo(550,50);
ctx.stroke();
// 头
ctx.beginPath();
ctx.strokeRect(250,200,300,200);
// 耳朵
ctx.beginPath();
ctx.strokeRect(200,250,50,100);
ctx.beginPath();
ctx.strokeRect(550,250,50,100);
// 嘴巴
ctx.beginPath();
ctx.strokeRect(350,350,100,30);
// 眼睛
ctx.beginPath();
ctx.arc(330,280,20,0,2*Math.PI,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(470,280,20,0,2*Math.PI,true);
ctx.stroke();
// 身体
ctx.beginPath();
ctx.strokeRect(300,400,200,200);
// 胳膊
ctx.beginPath();
ctx.strokeRect(50,450,250,50);
ctx.beginPath();
ctx.strokeRect(500,450,250,50);
// 腿
ctx.beginPath();
ctx.strokeRect(325,600,50,200);
ctx.beginPath();
ctx.strokeRect(425,600,50,200);
</script>
</body>
</html>
1回答
-
同学你好，实现效果是可以的哦，继续加油！
祝学习愉快！
0
相似问题