前端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~ 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python转换PDF为PowerPoint演示文件

PDF文件以其跨平台兼容性和版面固定性成为了分享和存储文档资料的首选格式。然而,在需要进行生动、互动性强的演示时,PDF的静态特性便难以满足个性化演示需求。将PDF文件转换为PowerPoint演示文稿可以解决这一问题。PowerPoint不仅提供了丰富的动画和过渡…

亚马逊erp个人贴牌工作室贴牌,孵化贴牌,无限开子账号...

三种方式个人工作室贴牌。 系统的工作室贴牌以及个人贴牌能实现的权限。首先贴牌这一块的所有功能跟卖的铺货的全部工程不用说了都可以用,没有任何限制,也没有隐藏收费,这是功能板块。主要是开子账号这块,在会员子账号角色先设置…

【渗透测试】利用hook技术破解前端JS加解密 - JS-Forward

前言 在做渗透测试项目时,尤其是金融方面,经常会遇到前端JS加解密技术,看着一堆堆密密麻麻的密文,会给人一种无力感。Hook技术则会帮助我们无需获取加解密密钥的前提下,获取明文进行渗透测试 环境准备 JS-Forward Burp…

函数(实参以及形参)

实际参数(实参) 实际参数就是在调用函数时传递给函数的具体值。这些值可以是常量、变量、表达式或更复杂的数据结构。实参的值在函数被调用时传递给对应的形参,然后函数内部就可以使用这些值来执行相应的操作。 int main() {int a 0;int b …

【轻松拿捏】Java-final关键字(面试)

目录 1. 定义和基本用法 回答要点: 示例回答: 2. final 变量 回答要点: 示例回答: 3. final 方法 回答要点: 示例回答: 4. final 类 回答要点: 示例回答: 5. final 关键…

Elasticsearch:Node.js ECS 日志记录 - Morgan

这是之前系列文章: Elasticsearch:Node.js ECS 日志记录 - Pino Elasticsearch:Node.js ECS 日志记录 - Winston 中的第三篇文章。在今天的文章中,我将描述如何使用 Morgan 包针对 Node.js 应用进行日子记录。此 Morgan Node.j…

【微服务】springboot对接Prometheus指标监控使用详解

目录 一、前言 二、微服务监控概述 2.1 微服务常用监控指标 2.2 微服务常用指标监控工具 2.3 微服务使用Prometheus监控优势 三、环境准备 3.1 部署Prometheus服务 3.2 部署Grafana 服务 3.3 提前搭建springboot工程 3.3.1 引入基础依赖 3.3.2 配置Actuator 端点 3.…

SpringBoot运维篇

工程打包与运行 windows系统 直接使用maven对项目进行打包 jar支持命令行启动需要依赖maven插件支持&#xff0c;打包时须确认是否具有SpringBoot对应的maven插件 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><ar…

单目测距 单目相机测距 图片像素坐标转实际坐标的一种转换方案

需要相机位置固定 原图 红色的点是我们标注的像素点&#xff0c;这些红色的点我们知道它的像素坐标&#xff0c;以及以右下角相机位置为原点的x y 实际坐标数值 通过转换&#xff0c;可以得到整个图片内部其余像素点的实际坐标&#xff0c; 这些红色的点是通过转换关系生成的&…

春招冲刺百题计划|堆

Java基础复习 Java数组的声明与初始化Java ArrayListJava HashMapJava String 类Java LinkedListJava Deque继承LinkedListJava SetJava 队列优先队列:第二题用到了 第一题&#xff1a;215. 数组中的第K个最大元素 可以直接使用Arrays.sort()快排&#xff0c;然后return nums…

Let‘s Encrypt免费安全证书的步骤及使用

网站安全现已成为每个在线业务的重要考虑因素。为了确保网站与用户之间的通信安全&#xff0c;SSL/TLS证书发挥着至关重要的作用。 申请Lets Encrypt域名SSL证书步骤 1、登录来此加密网站&#xff0c;输入域名&#xff0c;可以勾选泛域名和包含根域。 2、选择加密方式&#x…

初识Laravel(Laravel的项目搭建)

初识Laravel&#xff08;Laravel的项目搭建&#xff09; 一、项目简单搭建&#xff08;laravel&#xff09;1.首先我们确保使用国内的 Composer 加速镜像&#xff08;[加速原理](https://learnku.com/php/wikis/30594)&#xff09;&#xff1a;2.新建一个名为 Laravel 的项目&a…

Java中创建线程的方式

文章目录 创建线程ThreadRunnableCallable线程池创建方式自定义线程池线程池工作原理阻塞队列线程池参数合理配置线程池参数 创建线程 在Java中创建一个线程&#xff0c;有且仅有一种方式&#xff0c;创建一个Thread类实例&#xff0c;并调用它的start方法。 Thread 最经典也…

Selenium使用注意事项:

find_element 和 find_elements 的区别 WebDriver和WebElement的区别 问题&#xff1a; 会遇到报错&#xff1a; selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector",&…

离线下载linux mysql和mysql基本库

下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 选择数据库版本&#xff0c;系统&#xff0c;系统版本信息 下载需要的rpm包&#xff0c;传入服务器&#xff0c;使用yum install xxx.rpm安装即可 mysql-community下载地址 https://dev.mysql.com/downloads/my…

图论---匈牙利算法求二分图最大匹配的实现

开始编程前分析设计思路和程序的整体的框架&#xff0c;以及作为数学问题的性质&#xff1a; 程序流程图&#xff1a; 数学原理&#xff1a; 求解二分图最大匹配问题的算法&#xff0c;寻找一个边的子集&#xff0c;使得每个左部点都与右部点相连&#xff0c;并且没有两条边共享…

如何通过文件分发系统,实现能源电力企业文件的安全分发流转?

随着企业业务的快速发展&#xff0c;能源电力企业会在全国乃至全球&#xff0c;设立总部-分部-办事处/网点等多层级的结构&#xff0c;因此会涉及自动化的文件分发的业务场景。文件分发系统是一种将文件从一个地方自动传输到多个接收者的过程&#xff0c;可以提高工作效率&…

Linux 复现Docker NAT网络

Linux 复现Docker NAT网络 docker 网络的构成分为宿主机docker0网桥和为容器创建的veth 对构成。这个默认网络命名空间就是我们登陆后日常使用的命名空间 使用ifconfig命令查看到的就是默认网络命名空间&#xff0c;docker0就是网桥&#xff0c;容器会把docker0当成路由&…

Prometheus+Grafana主机运行数据

目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具&#xff0c;而Node Exporter是Prometheus的一个官方插件&#xff0c;用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…

STM32入门开发操作记录(一)——新建工程

目录 一、课程准备1. 课程资料2. 配件清单3. 根目录 二、环境搭建三、新建工程1. 载入器件支持包2. 添加模块3. ST配置4. 外观设置5. 主函数文件 一、课程准备 1. 课程资料 本记录操作流程参考自b站视频BV1th411z7snSTM32入门教程-2023版 细致讲解 中文字幕&#xff0c;课程资…