canvas设置渐变色文字(线性、径向)

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 线性渐变语法及参数
    • 径向渐变语法及参数
    • 示例效果图
    • 示例源代码(共124行)
    • canvas基本属性
    • canvas基础方法

如何使用canvas设置渐变色文字呢?这里分为设置线性渐变(createLinearGradient)和径向渐变(createRadialGradient)。请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

线性渐变语法及参数

context.createLinearGradient(x0,y0,x1,y1);

x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标

径向渐变语法及参数

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径

示例效果图

在这里插入图片描述

示例源代码(共124行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-13
*/
<template><div class="djs_container"><div class="top"><h3>canvas设置渐变色文字(线性、径向)</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw1()">线性渐变背景</el-button><el-button type="primary" size="mini" @click="draw2()">线性渐变文字</el-button><el-button type="success" size="mini" @click="draw3()">径向渐变背景</el-button><el-button type="success" size="mini" @click="draw4()">径向渐变文字</el-button><el-button type="danger" size="mini" @click="clearCanvas()">清除</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,}},mounted() {this.setCanvas()},methods: {clearCanvas() {this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);},setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");},draw1() {this.clearCanvas()let gradient = this.ctx.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);gradient.addColorStop(0,'blue');gradient.addColorStop(0.25,'yellow');gradient.addColorStop(0.5, 'white');gradient.addColorStop(0.75, 'red');gradient.addColorStop(1.0,'green');this.ctx.fillStyle = gradient;this.ctx.fillRect(0,0, this.canvas.width,this.canvas.height); },draw2() {this.clearCanvas()let gradient = this.ctx.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);gradient.addColorStop(0,'blue');gradient.addColorStop(0.25,'yellow');gradient.addColorStop(0.5, 'white');gradient.addColorStop(0.75, 'red');gradient.addColorStop(1.0,'green');this.ctx.fillStyle = gradient;this.ctx.font = '80px STheiti, SimHei';this.ctx.fillText('还是大剑师兰特', 224, 266);},draw3() {this.clearCanvas()let gradient = this.ctx.createRadialGradient(490, 245, 20, 490, 245, 200);gradient.addColorStop(0,'blue');gradient.addColorStop(0.25,'yellow');gradient.addColorStop(0.5, 'white');gradient.addColorStop(0.75, 'red');gradient.addColorStop(1.0,'green');this.ctx.fillStyle = gradient;this.ctx.fillRect(0,0, this.canvas.width,this.canvas.height); },draw4() {this.clearCanvas()let gradient = this.ctx.createRadialGradient(490, 245, 20, 490, 245, 200);gradient.addColorStop(0,'blue');gradient.addColorStop(0.25,'yellow');gradient.addColorStop(0.5, 'white');gradient.addColorStop(0.75, 'red');gradient.addColorStop(1.0,'green');this.ctx.fillStyle = gradient;this.ctx.font = '80px STheiti, SimHei';this.ctx.fillText('还是大剑师兰特', 224, 266);},}}
</script><style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #994170;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #994170;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #f9f9f9;}
</style>

canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

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

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

相关文章

gitee完整使用教程,创建项目并上传

目录 一 什么是gitee 二 安装Git 三 登录gitee&#xff0c;生成密钥 四 配置SSH密钥 五 创建项目 六 克隆仓库到本地 七 关联本地工程到远程仓库 八 添加文件 九 异常处理 十 删除仓储 十一 git常用命令 一 什么是gitee gitee是开源中国推出的基于git的代码托管服务…

Sqoop性能优化:高效数据传输的技巧

当使用Apache Sqoop进行数据传输时&#xff0c;性能优化至关重要。高效的数据传输可以减少任务运行时间&#xff0c;减轻集群负载&#xff0c;提高整体工作效率。在本文中&#xff0c;将深入探讨Sqoop性能优化的关键技巧&#xff0c;并提供丰富的示例代码&#xff0c;以帮助大家…

response.cookies详解

response.cookies详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一同深入探讨在Web开发中不可或缺的一项知识——“response.cookies”&…

短视频账号矩阵剪辑分发系统技术源头开发

1.技术开发必备的开发文档说明&#xff1a; 1.1系统架构&#xff1a; 抖音SEO排名系统主要由以下几个模块组成&#xff1a; 1. 数据采集模块&#xff1a;负责采集抖音上的相关数据&#xff0c;包括视频、用户、话题等。 2. 数据处理模块&#xff1a;对采集到的数据进行处理&a…

使用斐波那契(Fibonacci)数列来测试各大语言的性能

笔者使用最多的语言是C&#xff0c;目前项目中在使用Go&#xff0c;也使用过不少其它语言&#xff0c;像Erlang&#xff0c;Python&#xff0c;Lua&#xff0c;C#等等。最近看到C#夺冠&#xff0c;首次荣获 TIOBE 年度编程语言&#xff0c;同时也看到网上有不少Java与C#之争的文…

【机器学习300问】4、机器学习到底在学习什么?

首先我们先了解一个前置问题&#xff0c;再回答机器学习到底在学习什么。 一、求机器学习问题有哪几步&#xff1f; 求解机器学习问题的步骤可以分为“学习”和“推理”两个阶段。首先&#xff0c;在学习阶段进行模型的学习&#xff0c;然后&#xff0c;在推理阶段用学到的模型…

C++ STL中的 pair

pair 概述 pair 用于将两个可能是不同数据类型的值结合在一起。pair 提供了一种将两个异构对象存储为单个单元的方法。如果想存储元组&#xff0c;基本上会使用它。pair 容器是一个定义在 <utility> 头文件中的简单容器&#xff0c;由两个数据元素或对象组成。 第一个元…

匠心科技BLDC开发板原理图讲解

匠心科技BLDC开发板资料 链接&#xff1a;https://pan.baidu.com/s/1s5YjzRSDLKQvl86lBVAqKA?pwda6cx 提取码&#xff1a;a6cx 解压密码&#xff1a;JXKJ_RALDNWB站视频讲解&#xff08;&#xff09; 链接: 匠心科技直流无刷电机开发板原理图讲解 BLDC的开发板主要分为四个模…

【PythonCode】eval()函数巩固和复数模运算等

【PythonCode】eval()函数巩固和复数模运算等 前言 在很多高大上的项目中&#xff0c;一个花费很长时间、消耗大量人力物力才查出来的BUG&#xff0c;经常是一个符号错误、一个值传错、一个基本函数的用法没有考虑周到等基本问题&#xff0c;所以基础不牢、地动山摇&#xff0…

Linux的权限(1)

目录 操作系统的"外壳"程序 外壳程序是什么&#xff1f; 为什么存在外壳程序&#xff1f; 外壳程序怎么运行操作&#xff1f; 权限 什么是权限&#xff1f; 权限的本质&#xff1f; Linux中的&#xff08;人&#xff09;用户权限&#xff1f; su和su -的区别…

2024 1.6~1.12 周报

一、上周工作 论文研读 二、本周计划 思考毕业论文要用到的方法或者思想&#xff0c;多查多看积累可取之处。学习ppt和上周组会内容、卷积神经网络。 三、完成情况 1. 数据训练的方式 1.1 迁移学习 迁移学习是一种机器学习方法&#xff0c;把任务 A 训练出的模型作为初始模…

react 项目结构配置

1 项目整体目录结构的搭建 如下图&#xff1a; 2 重置css样式: normalize.css reset.less ; 第一步 安装 npm i normalize.css 入口文件index.tsx导入&#xff1a;import ‘noremalize.css’ 第二步 创建自己的css样式&#xff1a;在assets文件夹中创建css…

常用冷凝器的传热系数与单位换热面积推荐数据

制冷剂 氨 立式壳管式 700~800 传热系数W/m2℃ 3000~4000 单位面积热负荷W/m2 &#xff08;1&#xff09;温升2~3℃ &#xff08;2&#xff09;传热温差4~6℃ &#xff08;3&#xff09;单位面积冷水耗量1~1.7m3/m2h &#xff08;4&#xff09;光钢管 &#xff08;5&#xf…

【设计模式-03】Strategy策略模式及应用场景

一、简要描述 Java 官方文档 Overview (Java SE 18 & JDK 18)module indexhttps://docs.oracle.com/en/java/javase/18/docs/api/index.html Java中使用到的策略模式 Comparator、comparable Comparator (Java SE 18 & JDK 18)declaration: module: java.base, pa…

JAVA进化史: JDK14特性及说明

JDK 14于2020年3月发布。这个版本引入了一些新特性和改进&#xff0c;以下是其中一些主要特性 JEP 361: 进一步改进了switch表达式 进一步改进了switch表达式&#xff0c;引入了新的用法和语法。 // 使用标准的switch表达式 int day 3; String dayType switch (day) {case…

js(JavaScript)数据结构之散列表(Hash)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

web学习笔记(十五)

目录 1.Date对象 1.1日期对象的概念 1.2Date()方法的使用 1.3Date()常用方法汇总 1.4例题&#xff1a;用函数编写一个倒计时 2.函数 2.1函数的概念 2.2函数的使用 2.3函数的参数 2.4函数的声明 2.5函数的返回值 2.6异步函数 3特殊函数类型 3.1匿名函数 3.2箭头函数…

前端开发中需要注意的CSS命名规则以及书写顺序

1、CSS的命名——BEM规则&#xff1a; CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。 BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)&#xff0c; 即&#xff1a;[block]__[element]--[modifier]。 模块和子元素之间用两个下划…

SPARK--cache(缓存)和checkpoint检查点机制

SPARK–cache(缓存)和checkpoint检查点机制 rdd的特性 缓存和checkpoint 作用都是进行容错rdd在计算是会有多个依赖&#xff0c;为了避免计算错误是从头开始计算&#xff0c;可以将中间* 依赖rdd进行缓存或checkpoint缓存或checkpoint也叫作rdd的持久化一般对某个计算特别复杂的…

[Flutter] extends、implements、mixin和 abstract、extension的使用介绍说明

类创建&#xff1a;abstract&#xff08;抽象类&#xff09;、extension&#xff08;扩展&#xff09; 1.abstract&#xff08;抽象类&#xff09; dart 抽象类主要用于定义标准&#xff0c;子类可以继承抽象类&#xff0c;也可以实现抽象类接口。抽象类通过abstract 关键字来…