麻烦老师检查下
来源:3-8 编程练习
Yuri沫
2020-04-22 13:47:40
<!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");
ctx.strokeRect(300,200,200,120);
ctx.strokeRect(275,220,25,50);
ctx.strokeRect(500,220,25,50);
ctx.strokeRect(364,270,70,30);
ctx.arc(350,240,12,0,2*Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.arc(450,240,12,0,2*Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,100);
ctx.lineTo(360,200);
ctx.moveTo(500,100);
ctx.lineTo(440,200);
ctx.stroke();
ctx.strokeRect(340,320,120,200);
ctx.strokeRect(140,390,200,20);
ctx.strokeRect(460,390,200,20);
ctx.strokeRect(370,520,20,200);
ctx.strokeRect(410,520,20,200);
</script>
</body>
</html>
另外请问下老师,有没有类似strokeRect的方法可以去画圆?
2回答
同学你好,是的,还需要使用stroke()描边。
祝学习愉快!
好帮手慕星星
2020-04-22
同学你好,代码绘制效果很棒。
另外,可以使用arc方法画圆,还需要配合stroke方法,参考
自己测试下,祝学习愉快!