canvas绘制线条（五）

画线条：

绘制线条，其实是绘制路径！
一条线段，需要一个起始点和一个终点，

由此需要一个设置起始点的函数和一个设置终点的函数
函数如下

context.moveTo(x,y)
参数x,y表示起始位置坐标
context.lineTo(x,y)
参数x，y表示终点位置坐标

光写这2个没用，至于为什么，不要问，这是规定，你需要在开始画前，调用开始函数

context.beginPath();
意思就是我要开始画线了（Path单词就知道是画路径）

结束也要调用函数

context.closePath();
意思就是路径的参数我都配置好了

最后还需要调用函数把他画出来

context.stroke();
意思就是把上面参数的轮廓画出来

这样就画出来了
代码如下：

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canves高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      context.beginPath();
      context.moveTo(10,10);
      context.lineTo(200,400);
      context.closePath();
      context.stroke();
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

效果图：

改变颜色
在绘画前插入以下函数
context.strokeStyle="#23ada1";

代码如下：

  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      context.strokeStyle="#23ada1";
      context.beginPath();
      context.moveTo(10,10);
      context.lineTo(200,400);
      context.closePath();
      context.stroke();
    });
  </script>

效果图：

改变线条粗细
在绘画前插入以下函数
context.lineWidth=20;

代码如下：

  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      context.strokeStyle = "#23ada1";
      context.lineWidth = 20;
      context.beginPath();
      context.moveTo(10,10);
      context.lineTo(200,400);
      context.closePath();
      context.stroke();
    });
  </script>

效果图：

canvas绘制线条（五）

猜你喜欢