前端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 数据 获取 中心点方法,线的中心点取中心值搞定 已解决
有需求需要对。多边形 获取中心点方法,绝大多数都是 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机制,报告错误发生的原因以及所在的位置,通过查询来获取。...
【CUDA】 Trust基本特性介绍及性能分析
Trust简介 Thrust 是一个实现了众多基本并行算法的 C 模板库,类似于 C 的标准模板库(standard template library, STL)。该库自动包含在 CUDA 工具箱中。这是一个模板库,仅仅由一些头文件组成。在使用该库的某个功能时,包含需要的头文件即可。该库中的所有类型与函数都在命名空…...
颈肩肌筋膜炎中医治疗
颈肩肌筋膜炎,又称颈肩肌纤维织炎或肌肉风湿症,是一种涉及筋膜、肌肉、肌腱和韧带等软组织的无菌性炎症。以下将分别从症状和治疗两方面进行详细介绍。 一、颈肩肌筋膜炎的症状 颈肩肌筋膜炎的主要症状包括: 1、肩背部疼痛:患者…...
Java 通配符 在短信发送之中 通配符参数动态获取解决方案
目录 1、通配符应用场景 2、实现方案分析 2.1、可能针对不同模板中核定参数硬编码到程序之中写死 2.2、通配置模板之中动态获得对应的参数 3、通过正则表达式验证与替换参数${}参考示例 4、参考文章 1、通配符应用场景 我们在使用通配符场景,主要是应用于短信…...
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:类和对象
往期回顾: C 入门02:控制结构和循环-CSDN博客C 入门03:函数与作用域-CSDN博客C 入门04:数组与字符串-CSDN博客 一、前言 在前面文章的学习中,我们了解了 C 的基本结构、变量、输入输出、控制结构、循环、函数、作用域…...
4G LTE教程
整体架构 物理层(第 1 层) 物理层通过空中接口传输来自 MAC 传输信道的所有信息。负责 RRC 层的链路自适应 (AMC)、功率控制、小区搜索(用于初始同步和切换目的)和其他测量(LTE 系统内部和系统之间)。 介…...
C++:哈希表
哈希表概念 哈希表可以简单理解为:把数据转化为数组的下标,然后用数组的下标对应的值来表示这个数据。如果我们想要搜索这个数据,直接计算出这个数据的下标,然后就可以直接访问数组对应的位置,所以可以用O(1)的复杂度…...
自己动手写一个滑动验证码组件(后端为Spring Boot项目)
近期参加的项目,主管丢给我一个任务,说要支持滑动验证码。我身为50岁的软件攻城狮,当时正背着双手,好像一个受训的保安似的,中规中矩地参加每日站会,心想滑动验证码在今时今日已经是标配了,司空…...
keepalive脑裂
keepalive脑裂 调度器的高可用 vip地址主备之间的切换,主在工作时,p地址只在主上,主停止工作,ip飘移到备服务器。 在主备的优先级不变的情况下,主恢复工作,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的时候,编译…...
Perl基础入门指南:从零开始掌握Perl编程
Perl是一种功能强大且灵活的编程语言,广泛应用于系统管理、Web开发、网络编程和文本处理等领域。如果你是编程新手或者想学习一种新的编程语言,Perl是一个不错的选择。本文将带你了解Perl的基础知识,并通过简单的示例代码帮助你快速入门。 什…...
Mybatis SQL注解使用场景
MyBatis 提供了几种常用的注解,主要用于简化 XML 映射文件的编写,使得 SQL 查询和操作可以直接在 Java 接口中定义。下面列出了主要的注解以及它们在被调用时的写法示例: 1. Select Select 注解用于执行查询操作,并将查询结果映…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
如何把工业通信协议转换成http websocket
1.现状 工业通信协议多数工作在边缘设备上,比如:PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发,当设备上用的是modbus从站时,采集设备数据需要开发modbus主站;当设备上用的是西门子PN协议时…...
