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

已于 2023-02-28 20:16:16 修改
阅读量852 收藏 1
点赞数 1
分类专栏： 开发记录 文章标签： javascript 前端 canvas
于 2023-02-28 20:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40119412/article/details/129267111
版权

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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)...
weixin_30725467的博客
03-23 1418
1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into...
基于 HTML5 Canvas 的 3D 模型贴图问题
weixin_34029680的博客
12-06 296
之前注意到的一个例子，但是一直没有沉下心来看这个例子到底有什么优点，总觉得就是一个 list 列表，也不知道右边的 3d 场景放两个节点是要干嘛，今天突然想起来就仔细地看了一下这个例子的代码，实际操作中应该还是有用处的，就跟大家分享一下。 本例地址： http://hightopo.com/guide/gui... 实现图如下，看起来略有...
【canvas】canvas基础使用（四）：线型的设置
最新发布
qq_2511276124的博客
04-10 947
学习如何使用canvas来设置线形。
canvas绘制圆形简明教程
Hiroshi's
03-01 1427
画直线图 <!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
HTML5:Canvas-绘制图形
weixin_33890526的博客
03-13 218
到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到Canvas前，需掌握路径，我们看看到底怎么做。 栅格 在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于c...
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 4022
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
canvas学习笔记之绘制简单路径
01-21
绘制矩形路径一般步骤: rect(x, y, width, height) 矩形路径，坐标点(x,y)，width height宽高 stroke()或fill 根据当前的样式，绘制或填充路径 也可使用前文提到的strokeRect或fillRect, 或者是通过lineTo拼接成矩形...
Canvas画布绘制螺旋点延伸特效.zip
11-02
2D渲染上下文提供了大量的方法和属性，如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等，用于绘制矩形、线条、路径等基本图形。 接下来，我们要讨论如何实现螺旋点的绘制。螺旋图形可以...
canvas-note:《Canvas开发笔记》(不定时更新)
05-08
开发者可以通过`beginPath()`开始一个路径，然后使用`moveTo()`和`lineTo()`定义线条，`arc()`绘制圆弧，`rect()`绘制矩形等方法。最后，通过`stroke()`或`fill()`完成路径的填充或描边。 3. **绘制二维动画**：...
html5 canvas创意个性圆形时钟代码.zip
09-26
API提供了各种绘图方法，如`fillRect()`用于填充矩形，`arc()`用于绘制圆弧，以及`strokeText()`用于绘制文本等。 在这个案例中，主要涉及到以下知识点： 1. **Canvas基本用法**：创建Canvas元素并获取其2D渲染上...
html5 canvas绘制圆形、方形矩形、线段、图片等各种图形（面向对象版本）
2401_83816970的博客
03-29 923
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车！！的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
09-28
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来,我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成,感兴趣的朋友可以了解下
canvas绘制线条、矩形、曲线及填充
weixin_50913764的博客
07-22 1728
​四个参数起点坐标x,y左上角坐标；lineTo会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点。8.stroke()开始绘制图形，当前路径下的所有子路经都会绘制出来；6.fill()填充区域，此时只是填充，起点和终点并没有连接起来；3.moveTo开始定义一条新的子路径，该方法确定了线段的起点；9.如果要接着绘制新的路径，记得调用beginPath()方法；4.lineTo将上面定义的线段起点和指定的新的点连接起来；1.绘制线段的API是上下文对象的方法；.........
canvas-绘制圆形
nicecode
07-27 5223
角度与弧度的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基础入门系列教程(3)-绘制直线图形
螺钉课堂官方博客
02-12 403
2.1.绘制直线 2.1.1.设置描边颜色 通过strokeStyle属性来设置线条颜色 // 1. 获取到canvas对象 var oCanvas = document.getElementById('cvs') // 2. 获取到上下文环境 var ctx = oCanvas.getContext('2d') // 3. 开始绘制图形 // 3.1.把路径移动到画布中...
canvas详解01-绘制基本图形
大雾起了清晨
06-23 3451
既然我们已经设置了 canvas 环境，我们可以深入了解如何在 canvas 上绘制。到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。
canvas圆环和圆弧，并添加文字
九段刀客的博客
02-22 927
【代码】canvas圆环和圆弧，并添加文字。
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
热门推荐
任海丽(3G/移动开发)
01-20 30万+
1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into t
canvas 利用js绘制圆角矩形
08-09
要利用js绘制圆角矩形，我们可以使用Canvas标签和它的API来实现。 首先，我们需要获得一个指向Canvas元素的引用，这样我们就可以利用其API进行绘图操作。可以通过JavaScript代码来获取该引用，如下所示： ```javascript var canvas = document.getElementById("myCanvas"); ``` 接下来，我们需要获得一个指针来操作Canvas的绘图环境，我们可以使用getContext方法来实现，如下所示： ```javascript var ctx = canvas.getContext("2d"); ``` 然后，我们需要设置圆角矩形的相关属性，包括位置，大小和圆角半径，如下所示： ```javascript var x = 50; // 圆角矩形左上角的横坐标 var y = 50; // 圆角矩形左上角的纵坐标 var width = 200; // 圆角矩形的宽度 var height = 100; // 圆角矩形的高度 var radius = 20; // 圆角的半径 ``` 接下来，我们可以开始绘制圆角矩形了。首先，通过调用beginPath方法启动一个新的路径，然后使用arcTo方法来绘制圆角的边，最后使用closePath方法来闭合路径。代码如下所示： ```javascript ctx.beginPath(); ctx.moveTo(x + radius, y); // 到达右上角的起始点 ctx.arcTo(x + width, y, x + width, y + radius, radius); // 绘制右上角的圆角 ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius); // 绘制右下角的圆角 ctx.arcTo(x, y + height, x, y + height - radius, radius); // 绘制左下角的圆角 ctx.arcTo(x, y, x + radius, y, radius); // 绘制左上角的圆角 ctx.closePath(); // 闭合路径 ``` 最后，我们可以设置圆角矩形的样式和颜色，然后调用fill方法来填充圆角矩形的内部。代码如下所示： ```javascript ctx.fillStyle = "red"; // 设置圆角矩形的填充颜色 ctx.fill(); // 填充圆角矩形的内部 ``` 以上就是利用Canvas和JavaScript绘制圆角矩形的步骤。通过控制圆角矩形的位置、大小、圆角半径以及样式和颜色，我们可以在网页上实现各种个性化的圆角矩形效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值