当linewidth=10的时候我得到了一个缺角的三角形,谁能帮我修改下代码让我得到一个完整的三角形

来源:2-3 线条组成的图形和beginPath

白水向前冲

2014-12-02 13:22

547d4c8800014f5205000418.jpg

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Canvas 特效</title>

</head>

<body>

  <canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;" > 

   当前浏览器不支持Canvas,请更换浏览器后再试

  </canvas>


  <script>

     window.onload = function(){

     

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

           

               canvas.width = 800;

               canvas.height = 800;     

     

           var context = canvas.getContext("2d");


           context.moveTo(100,100);

           context.lineTo(700,700);

           context.lineTo(100,700);

           context.lineTo(100,100);

           context.lineWidth = 10;

           context.strokeStyle = "red";

           context.stroke();


     }

  </script>

</body>

</html>


写回答 关注

2回答

  • l1uyub0b0b0
    2014-12-02 16:17:21
    已采纳

    接着往后看,要使用closePath

  • 8年默
    2014-12-04 16:25:26

    最后一个context.lineTo(100,100); 可以改为 context.closePath();也可以在其后面加上 context.closePath();

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题