Canvas笔记04:绘制九大基本图形的方法,重头戏是贝塞尔曲线

hello,我是贝格前端工场,最近在学习canvas,分享一些canvas的一些知识点笔记,本期分享canvas绘制图形的知识,欢迎老铁们一同学习,欢迎关注,如有前端项目可以私信贝格。

Canvas是HTML5中的一个绘图API,可以用来绘制各种基本形状。以下是一些常见的基本形状的绘制方法:

矩形(Rectangle)

  • 绘制填充矩形:context.fillRect(x, y, width, height)
  • 绘制边框矩形:context.strokeRect(x, y, width, height)
  • 清除矩形区域:context.clearRect(x, y, width, height)

圆形(Circle)

  • 绘制填充圆形:context.arc(x, y, radius, startAngle, endAngle, anticlockwise),然后调用context.fill()
  • 绘制边框圆形:context.arc(x, y, radius, startAngle, endAngle, anticlockwise),然后调用context.stroke()

线段(Line)

  • 绘制直线:context.moveTo(x1, y1),然后调用context.lineTo(x2, y2),最后调用context.stroke()

多边形(Polygon)

  • 绘制填充多边形:先使用context.moveTo(x1, y1)移动到起始点,然后使用context.lineTo(x2, y2)连接到下一个点,最后调用context.closePath()和context.fill()
  • 绘制边框多边形:先使用context.moveTo(x1, y1)移动到起始点,然后使用context.lineTo(x2, y2)连接到下一个点,最后调用context.closePath()和context.stroke()

椭圆(Ellipse)

  • 绘制填充椭圆:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.fill()
  • 绘制边框椭圆:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.stroke()

椭圆弧(Elliptical Arc):

  • 绘制填充椭圆弧:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.fill()
  • 绘制边框椭圆弧:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.stroke()

扇形(Sector)

  • 绘制填充扇形:使用context.arc(x, y, radius, startAngle, endAngle, anticlockwise),然后调用context.lineTo(x, y)和context.closePath(),最后调用context.fill()
  • 绘制边框扇形:使用context.arc(x, y, radius, startAngle, endAngle, anticlockwise),然后调用context.lineTo(x, y)和context.closePath(),最后调用context.stroke()

梯形(Trapezoid)

  • 绘制填充梯形:使用context.moveTo(x1, y1)移动到起始点,然后使用context.lineTo(x2, y2)连接到下一个点,再使用context.lineTo(x3, y3)连接到下一个点,最后调用context.closePath()和context.fill()
  • 绘制边框梯形:使用context.moveTo(x1, y1)移动到起始点,然后使用context.lineTo(x2, y2)连接到下一个点,再使用context.lineTo(x3, y3)连接到下一个点,最后调用context.closePath()和context.stroke()

贝塞尔曲线——重头戏

绘制贝塞尔曲线需要使用到Canvas的context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)方法。这个方法需要传入三对控制点的坐标和终点的坐标,用来确定曲线的形状。

具体步骤如下:

  1. 使用context.moveTo(x1, y1)移动到曲线的起始点。
  2. 使用context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制贝塞尔曲线,其中(cp1x, cp1y)和(cp2x, cp2y)是第一对和第二对控制点的坐标,(x, y)是曲线的终点坐标。
  3. 调用context.stroke()或context.fill()来绘制曲线的边框或填充。

下面是一个绘制贝塞尔曲线的示例代码:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(50, 50); // 起始点
context.bezierCurveTo(100, 100, 200, 100, 250, 50); // 第一对控制点,第二对控制点,终点
context.stroke();

在上面的示例中,我们使用context.moveTo(50, 50)移动到起始点,然后使用context.bezierCurveTo(100, 100, 200, 100, 250, 50)绘制贝塞尔曲线,最后调用context.stroke()来绘制曲线的边框。

你可以根据需要调整控制点和终点的坐标来改变曲线的形状。同时,Canvas还提供了context.quadraticCurveTo(cp1x, cp1y, x, y)方法用于绘制二次贝塞尔曲线,使用方法类似。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ROS2学习(七) Foxy版本ros2替换中间件。

在ros2使用的过程中,一开始选用的foxy版本,后来发现,foxy版本的ros2有很多问题。一个是foxy版本已经停止维护了。另一个问题是这个版本有很多bug, 后续的版本在功能实现上做了很大的改动,甚至说进行了重写。修复的一些问题&#x…

【Flink网络传输】ShuffleMaster与ShuffleEnvironment创建细节与提供的能力

文章目录 一. Taskmanager之间传递数据细节二. ShuffleService的设计与实现三. 在JobMaster中创建ShuffleMaster四. 在TaskManager中创建ShuffleEnvironment五. 基于ShuffleEnvironment创建ResultPartition1. 在task启动时创建ResultPartition2. ResultPartition的创建与对数据…

WSL2安装+深度学习环境配置

WSL2安装深度学习环境配置 1 安装WSL22 配置深度学习环境1.1 设置用户名、密码1.2 安装cuda修改WSL安装路径 1.3 安装Anaconda 参考:搭建Windows Linux子系统(WSL2)CUDA环境 参考:深度学习环境配置 WindowsWSL2 1 安装WSL2 WSL …

java-springboot 源码 01

01.springboot 是一个启动器 先安装maven&#xff0c;按照网上的流程来。主要是安装完成后&#xff0c;要修改conf目录下的setting.xml文件。 添加&#xff1a;阿里云镜像 <mirror><id>aliyunmaven</id><mirrorOf>*</mirrorOf><name>ali…

判断连续数据同意特征的方法:插旗法

bool isMonotonic(int* nums, int numsSize) {int flag 2;for (int i 1; i < numsSize; i) {if (nums[i-1] > nums[i]) {if (flag 0)return false;flag 1;}else if (nums[i-1] < nums[i]) {if (flag 1)return false;flag 0;}}return true; }此代码较为简单&…

【Python】新手入门(8):什么是迭代?迭代的作用是什么?

【Python】新手入门&#xff08;8&#xff09;&#xff1a;什么是迭代&#xff1f;迭代有什么应用&#xff1f; &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】…

《时代教育》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问&#xff1a;《时代教育》杂志是正规刊物吗&#xff1f; 答&#xff1a;是的&#xff0c;国家新闻出版总署正式备案的期刊 问&#xff1a;《时代教育》是什么级别刊物&#xff1f; 答&#xff1a;省级 主管单位&#xff1a;成都日报报业集团 主办单位&#x…

<C++>【继承篇】

​ ✨前言✨ &#x1f393;作者&#xff1a;【 教主 】 &#x1f4dc;文章推荐&#xff1a; ☕博主水平有限&#xff0c;如有错误&#xff0c;恳请斧正。 &#x1f4cc;机会总是留给有准备的人&#xff0c;越努力&#xff0c;越幸运&#xff01; &#x1f4a6;导航助手&#x1…

主题乐园如何让新客变熟客,让游客变“留客”?

群硕跨越时间结识了一位爱讲故事的父亲&#xff0c;他汇集了一群幻想工程师&#xff0c;打算以故事为基础&#xff0c;建造一个梦幻的主题乐园。 这个乐园后来成为全球游客最多、收入最高的乐园之一&#xff0c;不仅在2023财年创下了近90亿&#xff08;美元&#xff09;的营收…

软件测试必学的16个高频数据库操作及命令

数据库作为软件系统数据的主要存取与操作中心&#xff0c;广泛应用于企业当中。在企业中常用的数据库管理系统有 ORACLE、MS SQL SERVER、MySQL等。其中以免费的 MySQL 最多&#xff0c;特别在中小型互联网公司里。 因此&#xff0c;本文的数据库操作是基于 MySQL 数据库系统下…

c# 二分查找(迭代与递归)

二分搜索被定义为一种在排序数组中使用的搜索算法&#xff0c;通过重复将搜索间隔一分为二。二分查找的思想是利用数组已排序的信息&#xff0c;将时间复杂度降低到O(log N)。 二分查找算法示例 何时在数据结构中应用二分查找的条件&#xff1a; 应用二分查找算法&#xff1a…

平台工程师的崛起:如何应对日益复杂的软件

平台工程只是 DevOps 专业化的另一个术语&#xff0c;还是有什么不同&#xff1f;事实可能介于两者之间。DevOps 及其相关的 DevXOps 风格具有浓厚的文化色彩&#xff0c;将各个团队置于中心位置。不幸的是&#xff0c;在许多地方&#xff0c;DevOps 导致了新的问题&#xff0c…

OpenAI 大声朗读出来

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Kubernetes: 本地部署dashboard

本篇文章主要是介绍如何在本地部署kubernetes dashboard, 部署环境是mac m2 下载dashboard.yaml 官网release地址: kubernetes/dashboard/releases 本篇文章下载的是kubernetes-dashboard-v2.7.0的版本&#xff0c;通过wget命令下载到本地: wget https://raw.githubusercont…

成都正信:亲戚借了钱一直不还怎么委婉的说

在中国传统文化中&#xff0c;亲情关系往往被视为最为重要和敏感的部分。当亲戚间发生借贷时&#xff0c;若出现拖欠不还的情形&#xff0c;处理起来尤为棘手。面对这样的尴尬局面&#xff0c;采取委婉而有效的沟通方式至关重要。 张华最近就遇到了这样的困扰。他的表弟去年因急…

vue3中的生命周期有哪些和怎么使用?

目录 前言&#xff1a; 正文&#xff1a; 总结: 前言&#xff1a; Vue.js 3是Vue.js框架的最新主要版本&#xff0c;引入了一些重大的改变和增强。在Vue 3中&#xff0c;由于Composition API的引入&#xff0c;生命周期钩子被替换为生命周期函数。 正文&#xff1a; 以下是…

回调函数、回调地狱、解放方法Promise的用法

回调函数 回调函数的定义非常简单&#xff1a;一个函数被当做一个实参传入到另一个函数(外部函数)&#xff0c;并且这个函数在外部函数内被调用&#xff0c;用来完成某些任务的函数。就称为回调函数回调函数的两种写法(实现效果相同)&#xff1a; const text () > {docum…

Python算法题集_N 皇后

Python算法题集_N 皇后 题51&#xff1a;N 皇后1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【规则遍历合理性回溯】2) 改进版一【线状态检测合理性回溯】3) 改进版二【单行矩阵回溯】 4. 最优算法5. 相关资源 本文为Python算法题集之一的代码…

文生视频Sora模型发布,是否引爆AI芯片热潮

文生视频Sora模型发布&#xff0c;是否引爆AI芯片热潮 1. 引言 在人工智能的历史长河中&#xff0c;每一次技术的飞跃都伴随着社会生产力的巨大变革。自2015年以来&#xff0c;深度学习技术的突破性进展&#xff0c;尤其是在自然语言处理、图像识别和机器学习等领域的成功应…

检测螺栓扭矩的方法有哪些——SunTorque智能扭矩系统

螺栓扭矩的检测是确保螺栓连接紧固程度和安全性的重要环节。正确的扭矩检测能够预防螺栓松动、断裂等潜在风险&#xff0c;从而保障设备和结构的稳定运行。SunTorque智能扭矩系统接下来将详细介绍螺栓扭矩的检测方法。 螺栓扭矩的检测是确保螺栓连接紧固程度和安全性的重要环节…