canvas基础入门系列教程(3)-绘制直线图形

最新推荐文章于 2024-01-01 09:56:54 发布
最新推荐文章于 2024-01-01 09:56:54 发布
阅读量397 收藏 2
点赞数
分类专栏： javascript html5 文章标签： canvas教程 JavaScript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keledon/article/details/87114546
版权

2.1.绘制直线

2.1.1.设置描边颜色

通过strokeStyle属性来设置线条颜色

  // 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  // 3. 开始绘制图形
  // 3.1.把路径移动到画布中的指定点，不创建线条。
  ctx.moveTo(100, 100)
  // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
  ctx.lineTo(200, 100)
  //设置描边颜色
  ctx.strokeStyle = 'red'
  // 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
  ctx.stroke()

2.1.2.设置线条宽度

通过lineWidth属性来设置线条宽度(粗细)

  // 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  // 3. 开始绘制图形
  // 3.1.把路径移动到画布中的指定点，不创建线条。
  ctx.moveTo(100, 100)
  // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
  ctx.lineTo(200, 100)
  //设置描边颜色
  ctx.strokeStyle = 'red'
  //设置线条宽度
  ctx.lineWidth = 50
  // 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
  ctx.stroke()

2.1.3.开始新路径

实例： 画两条线，颜色宽度各不相同

  // 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  // 第一条线
  ctx.moveTo(100, 100)
  // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
  ctx.lineTo(200, 100)
  //设置描边颜色
  ctx.strokeStyle = 'red'
  //设置线条宽度
  ctx.lineWidth = 20
  ctx.stroke()

  // 第二条线 
  ctx.moveTo(250, 100)
  // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
  ctx.lineTo(350, 100)
  //设置描边颜色
  ctx.strokeStyle = 'blue'
  //设置线条宽度
  ctx.lineWidth = 30
  // 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
  ctx.stroke()

上面代码中，虽然画第二条线的颜色和大小都和第一条线不一样，但是因为上面两条线都是属于同一个路径，那么后面的 ctx.strokeStyle = 'blue’会覆盖前面的ctx.strokeStyle = ‘red’，同理，ctx.lineWidth = 30会覆盖前面的ctx.lineWidth = 20，这样看起来两条线就是一样的颜色和大小

为了解决上面的问题，我们可以使用beginPath函数来开始一个新的路径

  // 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  //开始一条新路径
  ctx.beginPath()
  // 第一条线路径
  ctx.moveTo(100, 100)
  // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
  ctx.lineTo(200, 100)
  //设置描边颜色
  ctx.strokeStyle = 'red'
  //设置线条宽度
  ctx.lineWidth = 20
  ctx.stroke()

  ctx.beginPath()
  // 第二条线路径
  ctx.moveTo(250, 100)
  // 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
  ctx.lineTo(350, 100)
  //设置描边颜色
  ctx.strokeStyle = 'blue'
  //设置线条宽度
  ctx.lineWidth = 130
  // 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
  ctx.stroke()

使用beginPath表示开始一条新路径，意味着另一条路径的结束，上面代码中就会有两条路径，这样每条路径就可以使用自己的样式，而不会被覆盖

总结：开启一条新路径用beginPath

2.1.4.关闭路径

通过前面的学习，我们可以使用三条线来画出一个三角形

10536-7uecy1y9m27.png

  // 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  
  ctx.moveTo(100, 50)
  ctx.lineTo(200, 50)
  ctx.lineTo(200, 150)
  ctx.lineTo(100, 50)
  //设置描边颜色
  ctx.strokeStyle = 'red'
  //设置线条宽度
  ctx.lineWidth = 1
  ctx.stroke()

当我们把lineWidth设置大一些的时候，三角形不能完全闭合

ctx.lineWidth = 10

96228-xjr0rw70tme.png

我们可以使用closePath来自动关闭路径，就可以解决上面的问题

// 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  
  ctx.moveTo(100, 50)
  ctx.lineTo(200, 50)
  ctx.lineTo(200, 150)
  // ctx.lineTo(100, 50)
  ctx.closePath()
  //设置描边颜色
  ctx.strokeStyle = 'red'
  //设置线条宽度
  ctx.lineWidth = 30
  ctx.stroke()

注意： closePath表示关闭路径，关闭路径就是指将同一路径的起点和终点连接起来，使其成为一个封闭的图形，这里的closePath并不是一定要和beginPath成对出现的，一定要注意，beginPath表示开启了一条新的路径，意味着前一条路径结束，它们俩的功能是完全不同的

使用closePath后的效果：

15495-21et9eplkg9.png

2.1.5.线帽样式

线帽样式通俗的说就是给线条带帽子，在线条开始和结束处增加一些样式

ctx.lineCap = '样式'

上面语法中的样式有三种：

1. butt  默认值，没有线帽

2. round 圆形

3. square 正方形

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cvs{
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas id="cvs" width="600" height="300"></canvas>
  <script>
    // 1. 获取到canvas对象
    var oCanvas = document.getElementById('cvs')
    // 2. 获取到上下文环境 
    var ctx = oCanvas.getContext('2d')
    ctx.beginPath()
    ctx.moveTo(100, 50)
    ctx.lineTo(200, 50)
    ctx.strokeStyle = 'red'
    //设置线条宽度
    ctx.lineWidth = 10
    //默认无线帽
    ctx.lineCap = 'butt'
    ctx.stroke()
  
    ctx.beginPath()
    ctx.moveTo(100, 150)
    ctx.lineTo(200, 150)
    //设置描边颜色
    ctx.strokeStyle = 'green'
    //设置线条宽度
    ctx.lineWidth = 10
    //圆形线帽
    ctx.lineCap = 'round'
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(100, 250)
    ctx.lineTo(200, 250)
    //设置描边颜色
    ctx.strokeStyle = 'orangered'
    //设置线条宽度
    ctx.lineWidth = 10
    //正方形线帽
    ctx.lineCap = 'square'
    ctx.stroke()

     
  </script>
</body>
</html>

效果如下:

63672-q4q7bqo3lud.png

2.1.6.两条线相交处样式

两条直线相交的拐点是可以设置样式的

ctx.lineJoin = '样式'

样式有三种：

1.miter 默认尖角

2.round 圆角

3.bevel 斜角

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cvs{
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas id="cvs" width="600" height="300"></canvas>
  <script>
    // 1. 获取到canvas对象
    var oCanvas = document.getElementById('cvs')
    // 2. 获取到上下文环境 
    var ctx = oCanvas.getContext('2d')
    ctx.beginPath()
    ctx.moveTo(100, 100)
    ctx.lineTo(150, 50)
    ctx.lineTo(300, 100)
    ctx.strokeStyle = 'red'
    //设置线条宽度
    ctx.lineWidth = 10
    //默认尖角
    ctx.lineJoin = 'miter'
    ctx.stroke()
  
    ctx.beginPath()
    ctx.moveTo(100, 150)
    ctx.lineTo(150, 100)
    ctx.lineTo(300, 150)
    //设置描边颜色
    ctx.strokeStyle = 'green'
    //设置线条宽度
    ctx.lineWidth = 10
    // 圆角
    ctx.lineJoin = 'round'
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(100, 200)
    ctx.lineTo(150, 150)
    ctx.lineTo(300, 200)
    //设置描边颜色
    ctx.strokeStyle = 'black'
    //设置线条宽度
    ctx.lineWidth = 10
    // 斜角
    ctx.lineJoin = 'bevel'
    ctx.stroke()

     
  </script>
</body>
</html>

效果如下：

08577-keq9dqrhpa.png

2.1.7.虚线样式

可以通过setLineDash()来定义虚线样式

ctx.setLineDash(array)

实例：

  // 1. 获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  // 2. 获取到上下文环境 
  var ctx = oCanvas.getContext('2d')
  
  ctx.moveTo(100, 50)
  ctx.lineTo(400, 50)
  //设置描边颜色
  ctx.strokeStyle = 'red'
  //设置线条宽度
  ctx.lineWidth = 10
  //18px实线 5px空白
  ctx.setLineDash([18, 5])
  ctx.stroke()

效果如下：

16840-c93vm5s4eod.png

上面代码如果修改成这样

//10px实线，5px空白，20px实线，10px空白
ctx.setLineDash([10, 5, 20, 10])

效果如下：

26042-u1ybcs10vds.png

2.1.8.练习

画出下面图形

87343-4nrkyxh45jf.png

课程地址：http://edu.nodeing.com/course/80

大地飞鸿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas基础1 - 画直线（通俗易懂）
许小叮当的博客
06-10 3711
本文开始是canvas，通俗易懂，小白也没烦恼，
canvas绘制直线
编程界明世隐的博客
01-14 3745
说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 stroke() 描边 lineWidth 设置线的宽度 strokeStyle 设置线条的颜色 实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='...
学习Canvas基础-画直线
qq_67983277的博客
11-14 1653
学习Canvas基础-画直线
《canvas》之第2章 直线图形
yxqq378287007的博客
06-23 276
canvas 直线图形
canvas绘制直线，斜线
qq_21277357的博客
01-01 286
【代码】canvas绘制直线，斜线。
HTML5-Canvas绘制3D文字摇晃特效.zip
07-11
 w = canvas.width = window.innerWidth;  h = canvas.height = window.innerHeight;  spikeLength = w * config.widthToSpikeLengthRatio;  A = w / 2.2;  B = h / 2.2;  a = Math.round(Math.random() ...
canvas绘制的直线动画
08-31
Canvas是一个非常强大的图形绘制工具，允许开发者在网页上动态绘制图形，包括动画效果。以下是对给定示例代码的详细解释： 首先，HTML部分设置了Canvas元素，并通过CSS进行了一些基本样式设置，使其居中显示并设置...
JavaScript实现使用Canvas绘制图形的基本教程
01-21
1、使用Canvas绘制直线： <!doctype html> <html> <head> <meta charset=UTF-8> </head> <style type=text/css> canvas{border:dashed 2px #CCC} </style> <...
HTML5 Canvas绘制文本及图片的基础教程
12-14
在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下： 属性或方法 基本描述 font 设置绘制文字所使用的字体，例如20px 宋体，...
HTML5Canvas基础教程
07-22
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
canvas：基础知识【直线和矩形】
读心悦
01-13 967
canvas，就是画布，是HTML5和核心技术之一，结合JavaScript，可以绘制各种各样的图形，比如矩形、曲线、圆形等等。另外，canvas可以绘制图表、动画效果、游戏开发。基本图形汇中有直线和曲线。常见的直线图形是直线、矩形和多边形。
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 3983
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
canvas1：简单介绍、开始使用、画直线+虚线
Start2019
07-03 2132
目录 一、简单介绍 二、开始使用 三、画直线、虚线 3.1 画直线 1. 画直线的步骤： 2. 设置直线的样式 3. 绘制多条直线 3.2 画虚线 四、总结： 参考了廖雪峰老师的笔记。
初识 Canvas（使用 Canvas 绘制直线图形）
两个月亮
01-27 796
Canvas 元素已被大多数浏览器所支持，如果你担心旧版本浏览器无法显示 Canvas 元素，你可以在 Canvas 元素内部嵌套另一个元素（替补元素）。如果浏览器支持 Canvas 元素，则 Canvas 元素内部嵌套的另一个元素将被忽略；如果浏览器不支持 Canvas 元素，则 Canvas 元素将被忽略，而其内部的元素将正常发挥作用。，否则该元素后的元素都将被认为是 canvas 元素的替补元素。函数来为直线的绘制指定绘制的起点，那么上一条直线的终点将作为下一条直线的起点（第一条直线的起点必须使用。
[Tkinter 教程08] Canvas 图形绘制
gongdiwudu的专栏
10-17 1903
anvas 为 Tkinter 提供了绘图功能. 其提供的图形组件包括 线形, 圆形, 图片, 甚至其他控件. Canvas 控件为绘制图形图表, 编辑图形, 自定义控件提供了可能.
原生canvas标签画线——直线、平行线（设置不同颜色和宽度）
weixin_45096939的博客
05-24 1687
【代码】原生canvas标签画一条直线。
Canvas笔记：绘制基础图形线段的方法
qq_66996090的博客
09-09 678
不过是【主人（划掉）】老师的任务罢了
canvas复习笔记（绘制直线、矩形、圆形、圆弧）
YanHSama的博客
02-28 843
线的中心点会和画布像素点的底部对齐，所以会线中间是黑色的，但由于一个像素就不能再切割了，所以会有半个像素被染色，就变成了浅灰色。发现上面设置样式，两条直线颜色都是同时修改的，如果需要每条直线设置不同的样式，需要使用新开路径，避免污染。在实际开发中，为了让自己或者别的开发者更容易看懂弧度的数值，1°应该写成 Math.PI / 180。counterclockwise，true为顺时针方向， false为逆时针方向，默认为false。bevel: 斜面;就会发现第一条直线时默认的颜色，第二条样式有更改。
canvas 画布 （实线，三角，虚线）
IT00123的博客
07-15 1044
实线，三角，虚线
HTML5.Canvas.基础教程教程.pdf
最新发布
03-05
基础教程教程.pdf”是一份针对初学者的HTML5 Canvas教程，涵盖图形绘制API和代码示例，旨在教授如何利用Canvas进行基本的绘图操作，如画线、路径、图形、渐变、模式、图像和文本处理。教程适合对JavaScript有一定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大地飞鸿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值