lineTo()不起作用

时间:2016-06-06 14:34:15

标签: javascript html canvas

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>

3 个答案:

答案 0 :(得分:3)

您忘了拨打stroke()功能。正确地按照教程。

来自docs

  

Canvas 2D API的 CanvasRenderingContext2D.stroke() 方法使用非零缠绕规则使用当前笔触样式描绘当前或给定路径。

&#13;
&#13;
<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;
&#13;
&#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>