当前位置: 首页 > news >正文

前端Canvas入门——一些注意事项

创建渐变的三种方法:

createLinearGradient() - 线性渐变

createRadialGradient() - 径向渐变(放射性渐变)

createConicGradient() - 锥形渐变

这三种的核心观点都是:

创建一个gradient对象,然后调用addColorStop()方法给这个对象添加渐变色。

区别就是里面的形参数量、含义不一样,需要注意。

有个特别需要注意的点:

createPattern()  - 图片画笔

你可以理解为这个方法就是创建一个新的画笔工具,然后使用这个工具去进行绘画。

举个例子:

        let img = new Image()img.src = './images/5.png'img.onload = () => {// 创建重复元素对象 - repeat是CSS中的内容let png = ctx.createPattern(img, 'repeat')// 类似于一个画笔ctx.fillStyle = pngctx.fillRect(0, 0, 400, 400)}

这几个方法你可以想象成创建一个画笔。

不同的是,有些是创建的时候就限制了画笔的大小。

比如说,createLinerGradient()里面就有关于生效的距离:

        const gradient = ctx.createLinearGradient(0, 0, 600, 400)gradient.addColorStop(0, 'red')gradient.addColorStop(0.5, 'yellow')gradient.addColorStop(1, 'blue')ctx.moveTo(0, 0)ctx.lineTo(400, 400)ctx.lineWidth = 30ctx.strokeStyle = gradientctx.stroke()

 

从上面的例子可以看出,如果你的线条长度小于渐变色的宽度(上文中渐变色的宽度是600,但是线条的宽度是400),那么渐变色有可能显示不全——丢失部分/全部蓝色渐变效果。

这是因为在gradient对象方法——addColorStop(0, '颜色')里面的0是指向量的长度,它的长度是这个向量跟下一个向量之间的长度。

比如说例子中的就是0-0.5之间就是从红色渐变到黄色,而0.5-1之间就是从黄色渐变到蓝色。


而有些则是不限制大小,只看你后续使用画笔来干什么。

比如说,例子1中的createPattern()就是看后续调用fillRect()的大小。

但如果你使用的是stroke()方法,就只会剩下一个边框:

今天就到这,bye~ 

相关文章:

前端Canvas入门——一些注意事项

创建渐变的三种方法: createLinearGradient() - 线性渐变 createRadialGradient() - 径向渐变(放射性渐变) createConicGradient() - 锥形渐变 这三种的核心观点都是: 创建一个gradient对象,然后调用addColorStop()方法…...

移动互联安全扩展要求测评项

安全物理环境-无线接入点的位置选择 应为无线接入设备的安装选择合理位置,避免过度覆盖和电磁干扰。 无线接入设备的安装位置选择不当,易被攻击者利用,特别是攻击者会通过无线信号过度覆盖的弱点进行无线渗透攻击,因此要选择合理…...

【代码随想录】【算法训练营】【第64天】 [卡码117]软件构建 [卡码47]参加科学大会

前言 思路及算法思维,指路 代码随想录。 题目来自 卡码网。 day 64,周三,继续ding~ 题目详情 [卡码117] 软件构建 题目描述 卡码117 软件构建 解题思路 前提: 思路: 重点: 代码实现 C语言 [卡码…...

【python算法学习1】用递归和循环分别写下 fibonacci 斐波拉契数列,比较差异

问题: fibonacci 斐波拉契数列,用递归和循环的方法分别写,比较递归和循环的思路和写法的差别 最直接的思路,是写递归方法 循环方法的稍微有点绕,我觉得问题主要是出在,总结循环的通项公式更麻烦,难在数学…...

【邀请函】庭田科技邀您第五届中国国际复合材料科技大会

第五届中国国际复合材料科技大会暨第七届国际复合材料产业创新成果技术展示(ICIE7-新疆)将于7月25-27日在新疆乌鲁木齐-国际会展中心举行。上海庭田信息科技有限公司将携多款仿真模拟软件亮相本次大会,诚挚欢迎各位到场咨询了解! …...

win32:第一个窗口程序-应用程序入口点(part.6)

第一个窗口程序的最后一部分:应用程序入口函数wWinMain;这是Windows应用程序的主函数,负责初始化应用程序、注册窗口类、创建主窗口并进入消息循环处理消息。 int APIENTRY wWinMain(_In_ HINSTANCE hInstance,_In_opt_ HINSTANCE hPrevInst…...

c++ 多边形 xyz 数据 获取 中心点方法,线的中心点取中心值搞定 已解决

有需求需要对。多边形 获取中心点方法&#xff0c;绝大多数都是 puthon和java版本。立体几何学中的知识。 封装函数 point ##########::getCenterOfGravity(std::vector<point> polygon) {if (polygon.size() < 2)return point();auto Area [](point p0, point p1, p…...

ext_errno:拓展errno

类似于C库的errno机制&#xff0c;报告错误发生的原因以及所在的位置&#xff0c;通过查询来获取。...

【CUDA】 Trust基本特性介绍及性能分析

Trust简介 Thrust 是一个实现了众多基本并行算法的 C 模板库,类似于 C 的标准模板库(standard template library, STL)。该库自动包含在 CUDA 工具箱中。这是一个模板库,仅仅由一些头文件组成。在使用该库的某个功能时,包含需要的头文件即可。该库中的所有类型与函数都在命名空…...

颈肩肌筋膜炎中医治疗

颈肩肌筋膜炎&#xff0c;又称颈肩肌纤维织炎或肌肉风湿症&#xff0c;是一种涉及筋膜、肌肉、肌腱和韧带等软组织的无菌性炎症。以下将分别从症状和治疗两方面进行详细介绍。 一、颈肩肌筋膜炎的症状 颈肩肌筋膜炎的主要症状包括&#xff1a; 1、肩背部疼痛&#xff1a;患者…...

Java 通配符 在短信发送之中 通配符参数动态获取解决方案

目录 1、通配符应用场景 2、实现方案分析 2.1、可能针对不同模板中核定参数硬编码到程序之中写死 2.2、通配置模板之中动态获得对应的参数 3、通过正则表达式验证与替换参数${}参考示例 4、参考文章 1、通配符应用场景 我们在使用通配符场景&#xff0c;主要是应用于短信…...

Mybatis-Plus中LambdaQueryWrapper

基本用法 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; // 假设有一个 User 实体类 LambdaQueryWrapper<User> queryWrapper new LambdaQueryWrapper<>(); // 添加查询条件 queryWrapper.eq(User::getName, "John&quo…...

C++ 入门05:类和对象

往期回顾&#xff1a; C 入门02&#xff1a;控制结构和循环-CSDN博客C 入门03&#xff1a;函数与作用域-CSDN博客C 入门04&#xff1a;数组与字符串-CSDN博客 一、前言 在前面文章的学习中&#xff0c;我们了解了 C 的基本结构、变量、输入输出、控制结构、循环、函数、作用域…...

4G LTE教程

整体架构 物理层&#xff08;第 1 层&#xff09; 物理层通过空中接口传输来自 MAC 传输信道的所有信息。负责 RRC 层的链路自适应 (AMC)、功率控制、小区搜索&#xff08;用于初始同步和切换目的&#xff09;和其他测量&#xff08;LTE 系统内部和系统之间&#xff09;。 介…...

C++:哈希表

哈希表概念 哈希表可以简单理解为&#xff1a;把数据转化为数组的下标&#xff0c;然后用数组的下标对应的值来表示这个数据。如果我们想要搜索这个数据&#xff0c;直接计算出这个数据的下标&#xff0c;然后就可以直接访问数组对应的位置&#xff0c;所以可以用O(1)的复杂度…...

自己动手写一个滑动验证码组件(后端为Spring Boot项目)

近期参加的项目&#xff0c;主管丢给我一个任务&#xff0c;说要支持滑动验证码。我身为50岁的软件攻城狮&#xff0c;当时正背着双手&#xff0c;好像一个受训的保安似的&#xff0c;中规中矩地参加每日站会&#xff0c;心想滑动验证码在今时今日已经是标配了&#xff0c;司空…...

keepalive脑裂

keepalive脑裂 调度器的高可用 vip地址主备之间的切换&#xff0c;主在工作时&#xff0c;p地址只在主上&#xff0c;主停止工作&#xff0c;ip飘移到备服务器。 在主备的优先级不变的情况下&#xff0c;主恢复工作&#xff0c;vip会飘回到主服务器。 1、配优先级 2、配置…...

STM32Cubemx配置生成 Keil AC6支持代码

文章目录 一、前言二、AC 6配置2.1 ARM ComPiler 选择AC62.2 AC6 UTF-8的编译命令会报错 三、STM32Cubemx 配置3.1 找到stm32cubemx的模板位置3.2 替换文件内核文件3.3 修改 cmsis_os.c文件3.4 修改本地 四、编译对比 一、前言 使用keil ARM compiler V5的时候&#xff0c;编译…...

Perl基础入门指南:从零开始掌握Perl编程

Perl是一种功能强大且灵活的编程语言&#xff0c;广泛应用于系统管理、Web开发、网络编程和文本处理等领域。如果你是编程新手或者想学习一种新的编程语言&#xff0c;Perl是一个不错的选择。本文将带你了解Perl的基础知识&#xff0c;并通过简单的示例代码帮助你快速入门。 什…...

Mybatis SQL注解使用场景

MyBatis 提供了几种常用的注解&#xff0c;主要用于简化 XML 映射文件的编写&#xff0c;使得 SQL 查询和操作可以直接在 Java 接口中定义。下面列出了主要的注解以及它们在被调用时的写法示例&#xff1a; 1. Select Select 注解用于执行查询操作&#xff0c;并将查询结果映…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...