Canvas(HTML 5 元素)之绘制曲线图形

news2024/11/14 14:27:27

文章目录

  • 参考
  • 描述
  • 模板
  • 圆形
      • 圆形
      • 半圆形
      • 互补
  • 弧形
      • arc()
      • arcTo()
  • 二次贝塞尔曲线
  • 三次贝塞尔曲线

参考

项目描述
搜索引擎Bing
Canvas 中文网CanvasRenderingContext2D
W3schoolHTML Canvas 参考手册
从 0 到 1:HTML 5 Canvas 动画开发莫振杰

描述

项目描述
Edge109.0.1518.70 (正式版本) (64 位)

模板

如需运行示例,请将后续示例代码插入此处(为使文章更为精简,后续示例中将只给出 JavaScript 代码)。

<!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(HTML 5 元素)之绘制曲线图形</title>
    <style>
        *{
            /* 去除部分元素的默认属性 */
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        body{
            /* 设置视口(浏览器可视区域)最小高度 */
            min-height: 100vh;
            /* 使 body 元素内的元素均居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        canvas{
            /* 设置 Canvas 元素的边框样式 */
            border: 1px solid aqua;
            /* 设置圆角半径 */
            border-radius: 5px;
        }
    </style>
</head>
<body> 
    <canvas id="canvas" width="600px" height="400px"></canvas>
    <script>
        // 如需运行示例,请将后续示例代码插入此处
    </script>
</body>
</html>

圆形

圆形

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 0 * Math.PI/180, 360 * Math.PI/180);
// 关闭路径
canvas.closePath();
// 开始对圆进行绘制(描边)
canvas.stroke();

效果:

效果

注:

  1. canvas.arc()
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean)
项目描述
x圆心的 X 坐标。
y圆心的 Y 坐标。
radius圆的半径。
startAngle开始角度(单位为弧度),你可以利用该参数绘制半圆等图形。
endAngle结束角度(单位为弧度),你可以利用该参数绘制半圆等图形。
counterclockwise该参数用于指定开始绘制图形的方向。参数的值默认为 false,默认按顺时针方向开始绘制。
  1. Math.PI 即圆周率,该弧度值对应角度 180°。因此我们可以使用 Math.PI/180 将弧度转换为我们平常使用的 °

半圆形

为了绘制半圆形,我们仅需将 canvas.arc() 函数的第四个参数修改为 180 * Math.PI/180 即可。

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 180 * Math.PI/180, 360 * Math.PI/180);
// 关闭路径
canvas.closePath();
// 开始对圆进行绘制
canvas.stroke();

效果:

效果

互补

通过修改 arc() 函数的最后一个参数我们可以获得一个可以与当前图形互补成圆形的图形。

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 30 * Math.PI/180, 250 * Math.PI/180);
// 关闭路径
canvas.closePath();
// 使用 strokeStyle 设置描边时使用的画笔颜色
canvas.strokeStyle = "pink";
// 开始对被描述的圆进行绘制
canvas.stroke();

// 绘制与上一个图形互补成圆形的图形
canvas.beginPath();
canvas.arc(300, 200, 100, 30 * Math.PI/180, 250 * Math.PI/180, true);
canvas.closePath();
// 使用 fillStyle 设置填充时使用的颜色
canvas.fillStyle = 'dodgerblue';
// 开始对被描述的圆进行颜色填充
canvas.fill();

效果:

效果

弧形

arc()

canvas.closePath() 函数会将绘制的图形的首尾进行连接,所以我们仅使用 canvas.beginPath() 即可非闭合曲线(比如弧线)。

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 20 * Math.PI/180, 200 * Math.PI/180);
// 设置画笔颜色
canvas.strokeStyle = '#f40';
// 开始对圆进行绘制
canvas.stroke();

效果:

效果

arcTo()

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number)
项目描述
x1控制点的 X 坐标。
y1控制点的 Y 坐标。
x2圆弧终点的 X 坐标。
y2圆弧终点的 Y 坐标。
radius圆弧的半径。

注:

  1. 圆弧的起点由 canvas.moveTo()canvas.lineTo() 函数来指定。
  2. 图中右下角中的红色方块即为控制点。arcTo() 将绘制一个存在两条切线(由控制点出发到起始点及终止点的两条线组成)的弧线。
    控制点

举个栗子:

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 指定弧线的起点
canvas.moveTo(200, 70);
// 对需要被绘制的弧线进行描述
canvas.arcTo(120, 40, 100, 70, 100);
// 开始对弧线进行描线
canvas.stroke()

效果:

效果

二次贝塞尔曲线

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number)
项目描述
cpx控制点的 X 坐标。
cpy控制点的 Y 坐标。
x终止点的 X 坐标。
y终止点的 Y 坐标。

控制点

举个栗子:

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 开始一个路径
canvas.beginPath();
// 指定二次贝塞尔曲线的起点
canvas.lineTo(20, 20);
// 描述二次贝塞尔曲线
canvas.quadraticCurveTo(20, 100, 200, 20);
// 开始绘制曲线
canvas.stroke();

效果:

效果

注:

  1. 在使用 beginPath() 后,你需要使用 lineTo()moveTo() 函数为二次贝塞尔曲线指定起点。否则,控制点将作为曲线的起点。例如:
// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 开始一个路径
canvas.beginPath();
// 描述二次贝塞尔曲线
canvas.quadraticCurveTo(20, 100, 200, 20);
// 开始绘制曲线
canvas.stroke();

效果:

效果

  1. 二次贝塞尔曲线不是闭合图形,在使用 beginPath() 后,请不要使用 endPath() 函数。否则,Canvas 将不会绘制该图形。

三次贝塞尔曲线

与二次贝塞尔曲线不同的是,三次被塞尔曲线拥有两个控制点。使用三次贝塞尔曲线能够对曲线实现更精细的控制。

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
项目描述
cp1x第一个贝塞尔控制点的 X 坐标。
cp1y第一个贝塞尔控制点的 Y 坐标。
cp2x第二个贝塞尔控制点的 X 坐标。
cp2y第二个贝塞尔控制点的 Y 坐标。
x结束点的 X 坐标。
y结束点的 Y 坐标。

在下图中,左下角的红色方块代表第一个控制点,右上角的红色方块代表第二个控制点。
控制点
举个栗子:

/// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 开始一条路径
canvas.beginPath();
// 为三次贝塞尔曲线指定起点
canvas.moveTo(50, 50);
// 描述三次贝塞尔曲线
canvas.bezierCurveTo(74, 141, 224, 33, 250, 100);
// 绘制贝塞尔曲线
canvas.stroke();

效果:

效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/188812.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1.Java基础入门

目录 一.java概述 1.1 java语言发展史 1.2 为什么用Java 1.3 Java能做什么 1.4 Java技术体系 二.Java快速入门 2.1 如何使用Java 2.2 JVM&#xff0c;JRE&#xff0c;JDK 2.2.1 JVM 2.2.2 JRE 2.2.3 JDK 2.3 JDK的下载和安装 2.3.1 JDK的下载 2.3.2 JDK的安装 2.3.3 如何验证JD…

git版本回滚详解

写在前面&#xff1a;本文图片中出现的git st, git co分别是git status和git checkout的简写&#xff0c;使用中可以自行设置git config --global alias.st statusgit config --global alias.co checkout查看git配置文件 vim ~/.gitconfig1 工作区内的回滚操作当工作区的文件发…

Android 传感器概述(二)

Android 传感器概述&#xff08;二&#xff09;Android 传感器概述&#xff08;二&#xff09;运动传感器使用重力传感器使用线性加速度计使用旋转矢量传感器使用有效运动传感器使用计步器传感器使用步测器传感器使用原始数据使用加速度计使用陀螺仪使用未经校准的陀螺仪Androi…

【数据结构】动图详解单向链表

目录 1.什么是链表 1.问题引入 2. 链表的概念及结构 3. 问题解决 2.单向链表接口的实现 1.接口1&#xff0c;2---头插&#xff0c;尾插 2. 接口3&#xff0c;4---头删&#xff0c;尾删 3. 接口5---查找 4. 接口6&#xff0c;7---插入&#xff0c;删除 5. 接口8---打印 6. 注意…

CVE-2021-36934提权复现

CVE-2021-369342021年7 月 20 日&#xff0c;微软确认了一个新的本地提权漏洞(CVE-2021-36934)&#xff0c;被称为HiveNightmare。该漏洞由于Windows中多个系统文件的访问控制表(ACL)过于宽松&#xff0c;使得任何标准用户都可以从系统卷影副本中读取包括SAM、SYSETM、SECURITY…

Windows系统运行iOS设备管理软件iMazing2023

iMazing2023免费版是一款运行在Windows系统上的iOS设备管理软件&#xff0c;软件功能非常强大&#xff0c;界面简洁清晰&#xff0c;操作方便快捷&#xff0c;设计的非常有人性化&#xff0c;iMazing官方版为用户提供了多种设备管理功能&#xff0c;每一位用户都能以自己的形式…

MyISAM和InnoDB存储引擎的区别

目录前言存储引擎区别事务外键表单的存储数据查询效率数据更新效率如何选择前言 MyISAM和InnoDB是使用MySQL最常用的两种存储引擎&#xff0c;在5.5版本之前默认采用MyISAM存储引擎&#xff0c;从5.5开始采用InnoDB存储引擎。 存储引擎 存储引擎是&#xff1a;数据库管理系统…

小白如何快速入门Verilog HDL ?一文为你讲解清楚

在学习的过程中&#xff0c;无论学什么都不可能一蹴而就。都是从一个初步认识到慢慢了解再到精通掌握的过程&#xff0c;学习Verilog HDL语法也是一样的道理&#xff0c;首先你要清楚什么是Verilog HDL&#xff0c;然后结合实践再遵从理论&#xff0c;这样后面的学习才能理解的…

P1359 租用游艇

# 租用游艇 ## 题目描述 长江游艇俱乐部在长江上设置了 $n$ 个游艇出租站 $1,2,\cdots,n$。游客可在这些游艇出租站租用游艇&#xff0c;并在下游的任何一个游艇出租站归还游艇。游艇出租站 $i$ 到游艇出租站 $j$ 之间的租金为 $r(i,j)$&#xff08;$1\le i\lt j\le n$&#xf…

MPLS实验(1.31)

目标&#xff1a; 一、首先为公网的每个路由器配置对应的ip和环回并且用OSPF进行动态选路 r2&#xff1a; [r2]int gi 0/0/2 [r2-GigabitEthernet0/0/2]ip add 23.1.1.1 24 [r2-GigabitEthernet0/0/2]int lo0 [r2-LoopBack0]ip add 2.2.2.2 24 r3&#xff1a; [r3]int gi 0…

Oracle的学习心得和知识总结(十)|Oracle数据库PL/SQL语言循环控制语句之LOOP语句技术详解

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Guid…

yolov5篇---yolov5训练pt模型并转换为rknn模型,部署在RK3588开发板上——从训练到部署全过程

yolov5训练pt模型并转换为rknn模型&#xff0c;部署在RK3588开发板上——从训练到部署全过程一、任务介绍二、实验过程2.1 使用正确版本的yolov5进行训练(平台&#xff1a;x86机器ubuntu22.04系统)2.2 best.pt转换为best.onnx(平台&#xff1a;x86机器ubuntu22.04系统)2.3 best…

2023年西安Java培训机构十强榜单出炉,快来看看哪家榜上有名~

关于“西安Java培训机构哪家好&#xff1f;”“如何选择适合自己的Java培训机构&#xff1f;”这类问题常常出现网络上&#xff0c;其实关于这类问题没有统一的答案&#xff0c;一千个人有一千个哈姆雷特&#xff0c;每个人关注的重点不一样&#xff0c;需求更是不同&#xff0…

投入3.6亿美元!加拿大启动国家量子战略

&#xff08;图片来源&#xff1a;网络&#xff09;量子科学和技术处于研究和创新的前沿&#xff0c;具有巨大的商业化潜力和突破性进展&#xff0c;包括更有效的药物设计、更好的气候预测、改进的导航系统和清洁技术的创新。加拿大政府支持这一新兴行业的持续发展&#xff0c;…

用队列实现栈+用栈实现队列+循环队列(oj题)

1.题目: 力扣https://leetcode.cn/problems/implement-stack-using-queues/ 思路: 核心思路: 1、入数据&#xff0c;往不为空的队列入、保持另一个队列为空 2、出数据的时候&#xff0c;依次出队头的数据&#xff0c;转移另一个队列保存。只剩最后一个事&#xff0c;Pop掉 typ…

【数据结构之排序系列】校招热门考点:快速排序

目录前言一、hoare版本1. 单排2. 单排的代码实现3. 综合排序的实现4. 测试二、挖坑法1. 单排2. 单排的代码实现3. 综合排序的实现4. 测试三、前后指针法1. 单排2. 单排的代码实现3. 综合排序的实现4. 测试四、快排的时间复杂度五、快排的优化1. 三数取中2. 小区间优化六、快排的…

[Vulnhub] DC-9

前言&#xff1a; 打了这么长时间&#xff0c;终于&#xff0c;DC系列1-9 靶机已经干完了。通过这九个靶机的历练&#xff0c;都是单靶机 感觉远远不足&#xff0c;但也不是没有收获&#xff0c;学到了一些工具和提权的简单利用&#xff0c;大概知道了什么是反弹shell&#xf…

UE实现人物角色沿样条线移动效果

文章目录 1.实现目标2.实现过程2.1 实现思路2.2 具体过程3.参考资料1.实现目标 实现人物角色Character按样条线Spline自动移动效果,GIF动图如下。 2.实现过程 2.1 实现思路 (1)获取某一时刻样条线上点的位置,直接使用GetLocationAtTime函数即可。 (2)实时更新Characte…

Python Windows Apache部署Django项目运行环境(含Mysql)以及解决过程中遇到的问题

上一篇请移步Python Windows Apache部署Django项目运行环境_水w的博客-CSDN博客 本文是在上一篇的基础上&#xff0c; 进行后续工作。 目录 一、配置数据库&#xff08;MySQL&#xff09; 1、Mysql配置 2、安装MySQL管理工具SQLyog 【解决过程中遇到的问题】 解决报错&am…

java泛型2

真正搞定泛型&#xff01;&#xff01;&#xff01;------- >类型形参 所谓泛型&#xff0c;就是允许在定义类、接口、方法时使用类型形参&#xff0c;这个类型形参&#xff08;或叫泛型&#xff09;将在声明变量、创建对象、调用方法时动态地指定&#xff08;即传入实际的类…