老师，画台阶是这样子画的吗？
来源：3-4 编程练习
qq_顺其自然_67
2018-11-27 20:43:08
刚开始写代码的时候对坐标点有点懵，后面看了一下坐标系统就大概记得从哪个点画到哪个点了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas画直线</title>
<style>
canvas{background-color:lightpink;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600">
您的浏览器不支持canvas
</canvas>
<script>
//在此处填写代码
var canvas = document.getElementById('canvas');
console.log(canvas);
var ctx = canvas.getContext('2d');
ctx.moveTo(0,50);//起始点坐标，第一个参数是X轴，第二个参数是Y轴
ctx.lineTo(100 , 50);//画到结束点坐标，第一个参数是X轴，第二个参数是Y轴
ctx.moveTo(100,50);
ctx.lineTo(100 , 150);
ctx.moveTo(100 , 150);
ctx.lineTo(200 , 150);
ctx.moveTo(200 , 150);
ctx.lineTo(200,250);
ctx.moveTo(200 , 250);
ctx.lineTo(300 , 250);
ctx.moveTo(300 , 250);
ctx.lineTo(300 , 350);
ctx.moveTo(300 , 350);
ctx.lineTo(400 , 350);
ctx.moveTo(400 , 350);
ctx.lineTo(400 , 450);
ctx.moveTo(400 , 450);
ctx.lineTo(0 , 450);
ctx.strokeStyle = '#000';
ctx.stroke();
</script>
</body>
</html>
1回答
-
代码实现效果是不错的，开始不熟悉坐标位置，多练习几次就可以了。
祝学习愉快！
0
相似问题