canvas复习笔记（绘制直线、矩形、圆形、圆弧）

已于 2023-02-28 20:16:16 修改
阅读量973 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript 前端 canvas
于 2023-02-28 20:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/129267111
本文介绍了如何使用HTML5Canvas进行图形绘制，包括画直线、设置线条样式、绘制折线、矩形以及各种曲线，如贝塞尔曲线。还提到了arc函数用于画圆和圆弧，以及strokeText和fillText用于添加文本。此外，文章强调了beginPath和closePath在路径管理中的作用，以及如何使用clearRect清空画布。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

canvas 画一条直线

<body>
  <canvas
    id="c"
    width="300"
    height="200"
    style="border: 1px solid #ccc;"
  ></canvas>
</body>

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById("c");

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext("2d");

  // 4、绘制图形
  cxt.moveTo(100, 100); // 起点坐标 (x, y)
  cxt.lineTo(200, 100); // 终点坐标 (x, y)
  cxt.stroke(); // 将起点和终点连接起来

</script>

画两条直线

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById("c");

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext("2d");

  // 4、绘制图形
  cxt.moveTo(100, 100); // 起点坐标 (x, y)
  cxt.lineTo(200, 100); // 终点坐标 (x, y)
  cxt.stroke(); // 将起点和终点连接起来
  cxt.moveTo(80, 60); // 起点坐标 (x, y)
  cxt.lineTo(180, 60); // 终点坐标 (x, y)


  cxt.stroke(); // 将起点和终点连接起来
</script>

会发现两条直线的颜色不一致。
线的中心点会和画布像素点的底部对齐，所以会线中间是黑色的，但由于一个像素就不能再切割了，所以会有半个像素被染色，就变成了浅灰色。

设置宽度和线条颜色

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  // 4、绘制图形
  cxt.moveTo(100, 100) // 起点坐标 (x, y)
  cxt.lineTo(200, 100) // 终点坐标 (x, y)
  cxt.stroke() // 将起点和终点连接起来


  cxt.moveTo(80, 60) // 起点坐标 (x, y)
  cxt.lineTo(180, 60) // 终点坐标 (x, y)
  // 修改直线的宽度
  cxt.lineWidth = 2
  // 修改直线的颜色
  cxt.strokeStyle = 'pink'
  cxt.stroke() // 将起点和终点连接起来

</script>

发现如何设置lineWidth为1， 线条会有部分灰色。

发现上面设置样式，两条直线颜色都是同时修改的，如果需要每条直线设置不同的样式，需要使用新开路径，避免污染

就是在开始另画一条直线时，需要使用beginPath()新开路径

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  // 4、绘制图形
  cxt.moveTo(100, 100) // 起点坐标 (x, y)
  cxt.lineTo(200, 100) // 终点坐标 (x, y)
  cxt.stroke() // 将起点和终点连接起来

  cxt.beginPath() // 重新开启一个路径
  
  cxt.moveTo(80, 60) // 起点坐标 (x, y)
  cxt.lineTo(180, 60) // 终点坐标 (x, y)
  // 修改直线的宽度
  cxt.lineWidth = 2
  // 修改直线的颜色
  cxt.strokeStyle = 'pink'
  cxt.stroke() // 将起点和终点连接起来

</script>

就会发现第一条直线时默认的颜色，第二条样式有更改。

画折线

画折线，可以多使用几个lineTo实现

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  // 4、绘制图形
  cxt.moveTo(100, 100) // 起点坐标 (x, y)
  cxt.lineTo(200, 100) // 终点坐标 (x, y)
  cxt.stroke() // 将起点和终点连接起来

  cxt.beginPath() // 重新开启一个路径

  cxt.moveTo(80, 60) // 起点坐标 (x, y)
  cxt.lineTo(180, 60) // 终点坐标 (x, y)
  cxt.lineTo(180, 10) // 终点坐标 (x, y)
  // 修改直线的宽度
  cxt.lineWidth = 2
  // 修改直线的颜色
  cxt.strokeStyle = 'pink'
  cxt.stroke() // 将起点和终点连接起来

</script>

绘制矩形

使用strokeRect 和fillRect画矩形


<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  cxt.strokeStyle = 'blue'
  cxt.strokeRect(40, 40, 140, 80);//(x,y,width, height)

  cxt.strokeStyle = 'pink'

  cxt.strokeRect(80, 80, 140, 80);//(x,y,width, height)

  cxt.fillStyle = 'orange'
  cxt.fillRect(10, 10, 50, 100)

</script>

可以看出，后面fillRect会遮挡之前画出的矩形

使用rect画矩形，需要调用stroke或者fill来完成。

clearRect用于清除矩形

请空画布

cxt.clearRect(0, 0, cnv.width, cnv.height)

当画多边形，使用使用closePath()来闭合，否则拐角就出现“不正常”现象。

<body>
  <canvas id="c" width="300" height="500" style="border: 1px solid #ccc;"></canvas>
</body>

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')
  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.lineTo(200, 200)
  
  // 手动闭合
  cxt.closePath()

  cxt.lineJoin = 'miter' // 线条连接的样式。miter: 默认; bevel: 斜面; round: 圆角
  cxt.lineWidth = 20
  cxt.stroke()

</script>

拐角样式 lineJoin
属性值包括：

miter: 默认值，尖角
round: 圆角
bevel: 斜角

线帽 lineCap
属性值包括：

butt: 默认值，无线帽
square: 方形线帽
round: 圆形线帽

虚线 setLineDash()
虚线分3种情况.需要传入一个数组，且元素是数值型。
只传1个值
有2个值
有3个以上的值

arc()画圆

开始角度和结束角度，都是以弧度为单位。例如 180°就写成 Math.PI ，360°写成 Math.PI * 2
counterclockwise，true为顺时针方向， false为逆时针方向，默认为false

arc(x, y, r, sAngle, eAngle，counterclockwise)

在这里插入图片描述

在实际开发中，为了让自己或者别的开发者更容易看懂弧度的数值，1°应该写成 Math.PI / 180。

100°: 100 * Math.PI / 180
110°: 110 * Math.PI / 180
241°: 241 * Math.PI / 180

注意：绘制圆形之前，必须先调用 beginPath() 方法！！！ 在绘制完成之后，还需要调用 closePath() 方法！！！

一个完整的圆

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 360 * Math.PI / 180) // 顺时针
  cxt.closePath()

  cxt.stroke()

</script>

半圆

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180) // 顺时针
  cxt.closePath()

  cxt.stroke()

</script>

arc画圆弧

如果想画弧线，调用arc函数，最后不调用closePath()

画出一条在上的弧线


<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180, true) // 顺时针

  cxt.stroke()

</script>

比较常用的一个功能，用canvas绘制带有圆角的图片

  function drawRoundedRect(ctx, x, y, width, height, radius) {
    ctx.moveTo(x + radius, y)
    ctx.lineTo(x + width - radius, y)
    ctx.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI)
    ctx.lineTo(x + width, y + height - radius)
    ctx.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI)
    ctx.lineTo(x + radius, y + height)
    ctx.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, 1 * Math.PI)
    ctx.lineTo(x, y + radius)
    ctx.arc(x + radius, y + radius, radius, 1 * Math.PI, 1.5 * Math.PI)
  }

arcTo() 画弧线

语法

arcTo(cx, cy, x2, y2, radius)
//切断横坐标，切点纵坐标， 结束点横坐标， 结束点纵坐标， radius半径

ctx.moveTo(20,20); // 创建开始点 
ctx.lineTo(100,20); // 创建水平线 
ctx.arcTo(150,20,150,70,50); // 创建弧 
ctx.lineTo(150,120); // 创建垂直线

在这里插入图片描述

平方贝塞尔曲线

ctx.moveTo(100,100);
ctx.quadraticCurveTo(200,125,100,150);

在这里插入图片描述

三次方贝塞尔曲线

ctx.moveTo(150,0);
ctx.bezierCurveTo(0,125,300,175,150,300);

在这里插入图片描述

描边 strokeText()

strokeText(text, x, y, maxWidth)
  • text: 字符串，要绘制的内容
  • x: 横坐标，文本左边要对齐的坐标（默认左对齐）
  • y: 纵坐标，文本底边要对齐的坐标
  • maxWidth: 可选参数，表示文本渲染的最大宽度（px），如果文本超出 maxWidth 设置的值，文本会被压缩。

填充文本 fillText

fillText(text, x, y, maxWidth)

设置填充颜色

 fillStyle()

获取文本长度 measureText()

measureText().width 方法可以获取文本的长度，单位是 px 。

cxt.measureText(text).width

注：本文图片及代码部分都来源于网络。

HaanLen
关注
【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-02 1304
TCP的坚固与前端的智慧相遇，让网络的不确定变得可控。你是否经历过更巧妙的重连策略，或是棘手的断连难题？欢迎在评论区分享你的故事，一起加固这座网络的桥，让前端之旅更加稳健。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，
canvas画圆
热门推荐
编程界明世隐的博客
01-14 1万+
画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。 这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 实例1 window.onload=function(){ var canvas = document.get
canvas绘制圆
qq_21277357的博客
01-01 375
【代码】canvas绘制圆。
canvas绘制线条
weixin_46328739的博客
08-14 204
具体如下 使用线条绘制一个矩形。
canvas绘制圆形简明教程
Hiroshi's
03-01 1527
画直线图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas
canvas学习笔记之绘制简单路径
09-22
本篇文章将深入探讨Canvas的绘制简单路径，包括线段、矩形和圆弧路径的创建方法。 首先，我们来看线段（直线路径）的绘制。线段是Canvas最基本的元素之一，可以通过以下三个步骤完成： 1. `moveTo(x, y)`：这个...
Canvas入门学习笔记
最新发布
11-30
Canvas可以绘制基本图形，包括矩形、圆弧、折线、贝塞尔曲线等。矩形的绘制方式有三种：填充模式、路径模式和清除模式。例如，填充矩形的代码是： ```javascript ctx.fillRect(100, 200, 300, 400); ``` 绘制圆弧...
Canvas入门教程笔记
03-12
这里的`fillRect`方法用于绘制矩形，参数分别是左上角的x、y坐标以及矩形的宽和高。 #### 1.2 像素化与不可逆性 一旦在Canvas上绘制了图形，它们就被像素化了，这意味着不能直接修改已存在的图像。若要改变图形，...
Canvas画布绘制螺旋点延伸特效.zip
11-02
2D渲染上下文提供了大量的方法和属性，如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等，用于绘制矩形、线条、路径等基本图形。 接下来，我们要讨论如何实现螺旋点的绘制。螺旋图形可以...
《canvas》之第2章 直线图形
yxqq378287007的博客
06-23 738
canvas 直线图形
canvas绘制圆形
qq_41648132的博客
04-03 2390
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas绘制圆形&lt;/title&gt; &lt;style type="text/css"&gt;
原生canvas标签画线——直线、平行线（设置不同颜色和宽度）
weixin_45096939的博客
05-24 2383
【代码】原生canvas标签画一条直线。
canvas绘制直线，斜线
qq_21277357的博客
01-01 831
【代码】canvas绘制直线，斜线。
canvas绘制线条、矩形、曲线及填充
weixin_50913764的博客
07-22 1892
​四个参数起点坐标x,y左上角坐标；lineTo会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点。8.stroke()开始绘制图形，当前路径下的所有子路经都会绘制出来；6.fill()填充区域，此时只是填充，起点和终点并没有连接起来；3.moveTo开始定义一条新的子路径，该方法确定了线段的起点；9.如果要接着绘制新的路径，记得调用beginPath()方法；4.lineTo将上面定义的线段起点和指定的新的点连接起来；1.绘制线段的API是上下文对象的方法；.........
canvas-绘制圆形
nicecode
07-27 5397
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
canvas 画圆
weixin_43845137的博客
03-19 650
目录@[TOC](目录)canvas 画圆一个简单的圆圆弧等圆 canvas 画圆 一个简单的圆 arc(x, y, radius, startAngle, endAngle, 顺时针还是逆时针) ture 逆时针 false顺时针 <template> <div> <canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低，请升级浏览器或者使用谷歌浏览器</canvas>
canvas基础：绘制圆弧、圆形
大剑师兰特的GIS世界
12-03 1184
`arc() 用于绘制圆弧`，圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。 >`ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);`
Canvas 设置线条样式
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-14 1270
通过本文的学习，我们不仅掌握了如何在Canvas中设置线条样式的基础知识，还探索了如何运用这些技术来创造更复杂的效果。希望这些示例和技巧能帮助你在未来的项目中实现更加丰富多彩的图形界面。在实际工作中，不断尝试新的方法和技术，将使你的Canvas图形更具吸引力和实用性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
2.2.1 绘制Canvas路径 - 绘制线条
howard2005的专栏
10-13 443
通过实例，我们可以看到Canvas API的强大和灵活。无论是简单的线条还是复杂的图形，Canvas都能轻松应对。希望今天的分享能够帮助大家更好地理解和使用Canvas。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值