lineTo()
功能对我不起作用,为什么?这是代码。
<canvas id="sid" height="1000px" width="1000px"> </canvas>
<script>
var can = document.querySelector('#sid');
var a = can.getContext('2d');
a.beginPath();
a.moveTo(0, 0);
a.lineTo(140, 140);
a.lineTo(160, 160);
</script>
答案 0 :(得分:3)
您忘了拨打stroke()
功能。正确地按照教程。
来自docs:
Canvas 2D API的
CanvasRenderingContext2D.stroke()
方法使用非零缠绕规则使用当前笔触样式描绘当前或给定路径。
<canvas id="sid" height="1000px" width="1000px"></canvas>
<script>
var can = document.querySelector('#sid');
var a = can.getContext('2d');
a.beginPath();
a.moveTo(0, 0);
a.lineTo(140, 140);
a.lineTo(160, 160);
// After this you need to run the stroke command to get the line.
a.stroke();
</script>
&#13;
答案 1 :(得分:1)
在定义之后你不会抚摸它。只需添加stroke()
方法。
<canvas id="sid" height="1000px" width="1000px"> </canvas>
<script>
var can = document.querySelector('#sid');
var a = can.getContext('2d');
a.beginPath();
a.moveTo(0, 0);
a.lineTo(140, 140);
a.lineTo(160, 160);
a.stroke(); // This line is the import one being omitted.
a.closePath(); // You should close your path also. Not absolutely necessary in this case, given that stroke() will do this for you.
</script>
答案 2 :(得分:0)
这有助于你:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="sid" height="1000px" width="1000px"></canvas>
<script>
var can = document.getElementById("sid");
var a = can.getContext('2d');
a.beginPath();
a.lineWidth = "5";
a.strokeStyle = "green";
a.moveTo(0,0);
a.lineTo(140,140);
a.lineTo(160,160);
a.stroke();
</script>
</body>
</html>