老师，检查一下！

首页课程实战体系课手记专栏慕课教程

老师，检查一下！

来源：3-8 编程练习

前端菜鸟HH

2020-09-24 17:35:13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>canvas</title>

<style>

*{

margin: 0;

padding: 0;

}

canvas{background-color:lightblue;}

</style>

</head>

<body>

<canvas id="canvas" width="800" height="800">

您的浏览器不支持canvas

</canvas>

<script>

//在此处写出代码

var canvas = document.getElementById('canvas');

var cxt = canvas.getContext('2d');

// 左侧线

cxt.moveTo(120, 30);

cxt.lineTo(156, 97);

cxt.stroke();

// 右侧线

cxt.beginPath();

cxt.moveTo(228, 30);

cxt.lineTo(190, 97);

cxt.stroke();

// 头部

cxt.beginPath();

cxt.strokeRect(120, 98, 106, 70);

// 左耳朵

cxt.beginPath();

cxt.strokeRect(104, 112, 16, 30);

// 右耳朵

cxt.beginPath();

cxt.strokeRect(226, 112, 16, 30);

// 左眼

cxt.beginPath();

cxt.arc(150, 120, 8, 0, Math.PI * 2, true);

cxt.stroke();

// 右眼

cxt.beginPath();

cxt.arc(196, 120, 8, 0, Math.PI * 2, true);

cxt.stroke();

// 嘴

cxt.beginPath();

cxt.strokeRect(155, 142, 36, 12);

// 身体

cxt.beginPath();

cxt.strokeRect(136, 168, 72, 106);

// 左侧胳膊

cxt.beginPath();

cxt.strokeRect(32, 200, 104, 16);

// 右侧胳膊

cxt.beginPath();

cxt.strokeRect(208, 200, 104, 16);

// 左腿

cxt.beginPath();

cxt.strokeRect(146, 274, 16, 106);

// 右腿

cxt.beginPath();

cxt.strokeRect(182, 274, 16, 106);

</script>

</body>

</html>

写回答

1回答

好帮手慕星星

好帮手慕星星

2020-09-24

已采纳

同学你好，代码绘制效果很棒。继续加油，祝学习愉快！

0

0 学习 · 6815 问题

相似问题

老师,请检查

回答 1

请老师检查

回答 1

老师请检查

回答 2

麻烦老师检查

回答 2

老师检查一下

回答 1

打开慕课网App查看更多内容