从零开始学习在VUE3中使用canvas(二):fillStyle(填充样式)

一、fillStyle概念

在canvas中我们可以用fillStyle定义接下来的图像的样式,默认为黑色#000。

我们可以使用纯色、渐变、和纹理(例如图片)进行填充,来达到自己想要的效果。

二、代码

<template><div class="canvasPage"><!-- 写一个canvas标签 --><canvas class="main" ref="main"></canvas></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";// 获取canvas元素
const main = ref<HTMLCanvasElement>();// 绘制canvas
const drawCanvas = () => {// 确保获取到了canvas元素if (!main.value) return console.error("无法获取Canvas元素");const canvas = main.value;// 设置canvas的宽高canvas.width = 400; // 增加宽度以适应三个方块canvas.height = 100;// 获取Canvas绘制上下文const ctx = canvas.getContext("2d");if (!ctx) return console.error("无法获取CanvasRenderingContext2D");// 绘制纯色方块ctx.fillStyle = "red";ctx.fillRect(0, 0, 100, 100);// 绘制线性渐变方块// 创建线性渐变let gradientLinear = ctx.createLinearGradient(0, 0, 0, 100);//添加颜色断点gradientLinear.addColorStop(0, "rgba(67, 55, 135, 1)");gradientLinear.addColorStop(1, "rgba(176, 63, 191, 1)");//填充渐变ctx.fillStyle = gradientLinear;ctx.fillRect(100, 0, 100, 100);// 绘制径向渐变方块let gradientRadial = ctx.createRadialGradient(250, 50, 0, 250, 50, 50); // (x0, y0, r0, x1, y1, r1)gradientRadial.addColorStop(0, "rgba(242, 15, 231, 1)");gradientRadial.addColorStop(1, "rgba(64, 192, 214, 1)");ctx.fillStyle = gradientRadial;ctx.fillRect(200, 0, 100, 100);// 绘制图片填充方块const image = new Image();image.src = "https://www.ljynet.com/netImage/812688854_1707314089409.jpg";// 确保图片加载完成后再绘制image.onload = () => {ctx.drawImage(image, 300, 0, 100, 100);};
};// 页面挂载后才能绘制
onMounted(() => {drawCanvas();
});
</script>
<style lang="scss" scoped>
.canvasPage {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #dddddf;.main {width: 400px;height: 100px;}
}
</style>

三、效果展示

上一章:从零开始学习在VUE3中使用canvas(一):实现一个基础的canvas画布-CSDN博客

下一章:从零开始学习在VUE3中使用canvas(三):font(字体)-CSDN博客

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

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

相关文章

nginx 报Too many open files

nginx 异常报 Too many open files 上周时&#xff0c;nginx已经报 Too many open files 当时把 配置文件调整最大连接65535了&#xff0c;reload 重新加载nginx后不报错了。 cat /proc/14921/limits |grep "Max open file" * soft nofile 65535 * hard nof…

Softing TDX——设计模板

| 高质量的设计模板——减少开发诊断仪所需的工作量 现今&#xff0c;用户对诊断仪的界面和操作理念提出了更高的要求。一个直观的用户界面既能减少用户熟悉诊断仪的时间&#xff0c;又能减少在日常工作中进行诊断任务的时间。然而&#xff0c;创建一个精巧又独立于平台的诊断…

【黑马程序员】Python高阶

文章目录 闭包定义nonlocal关键字作用优缺点优点缺点 装饰器装饰器闭包写法 设计模式单例模式工厂模式优点代码示例 多线程基本概念threading模块 网络编程服务端开发socketsocket服务端编程 客户端开发 正则表达式正则的三个基础方法matchsearchfindAll 元字符匹配单字符匹配数…

代码随想录算法训练营第二十五天|● 216.组合总和III ● 17.电话号码的字母组合(JS写法)

216 组合总和Ⅲ 题目链接/文章讲解&#xff1a;https://programmercarl.com/0216.%E7%BB%84%E5%90%88%E6%80%BB%E5%92%8CIII.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1wg411873x 方法一&#xff1a;自己写的 自己写的&#xff0c;本题和77很像&#xf…

Redis数据结构对象之集合对象和有序集合对象

集合对象 集合对象的编码可以是intset或者hashtable. 概述 intset编码的集合对象使用整数集合作为底层实现&#xff0c;集合对象包含的所有元素都被保存在整数集合里面。 另一方面&#xff0c;hashtable编码的集合对象使用字典作为底层实现&#xff0c;字典的每个键都是一个…

PyTorch学习笔记之基础函数篇(十五)

文章目录 数值比较运算8.1 torch.equal()函数8.2 torch.ge()函数8.3 torch.gt()函数8.4 torch.le()函数8.5 torch.lt()函数8.6 torch.ne()函数8.7 torch.sort()函数8.8 torch.topk()函数 数值比较运算 8.1 torch.equal()函数 torch.equal(tensor1, tensor2) -> bool这个函…

JavaScript函数声明调用

普通函数 function f1(a, b) {return "普通函数f1&#xff1a;" a * b }console.log(f1(3, 7));var $ function f2() {return 普通函数f2 } console.log($())箭头函数 // 多个参数的箭头函数 const f3 (param1, param2) > {return "箭头函数f3&#xff…

web部署 四 限制

案例: 1/设置其下载速度限制:1000000010m&#xff0c;10000001m&#xff0c;2分别查看下载速率是否发生变化。 2/限制连接数&#xff0c;同时下载5个文件。查看第6个是否能正常访问。使用命令符:netstat-n&#xff0c;查看活动链接&#xff0c; 正常情况下我们的下载速度 我们…

遥感深度学习:CNN-LSTM模型用于NDVI的预测(Pytorch代码深度剖析)

代码上传至Github库&#xff1a;https://github.com/ChaoQiezi/CNN-LSTM-model-is-used-to-predict-NDVI 01 前言 这是一次完整的关于时空遥感影像预测相关的深度学习项目&#xff0c;后续有时间更新后续部分。 通过这次项目&#xff0c;你可以了解&#xff1a; pytroch的模…

石油炼化5G智能制造工厂数字孪生可视化平台,推进行业数字化转型

石油炼化5G智能制造工厂数字孪生可视化平台&#xff0c;推进行业数字化转型。在石油炼化行业&#xff0c;5G智能制造工厂数字孪生可视化平台的出现&#xff0c;为行业的数字化转型注入了新的活力。石油炼化行业作为传统工业的重要领域&#xff0c;面临着资源紧张、环境压力、安…

数组排列组合---M中取出N个元素

一、数组M中取出N个元素的所有组合 const getCombinationsWithRepetition (array: Array<string>, n: number) > {const result [] as anyconst currentCombination [] as anyfunction backtrack(start: number, count: number) {if (count 0) {result.push(curr…

蓝桥杯练习题——健身大调查

在浏览器中预览 index.html 页面效果如下&#xff1a; 目标 完成 js/index.js 中的 formSubmit 函数&#xff0c;用户填写表单信息后&#xff0c;点击蓝色提交按钮&#xff0c;表单项隐藏&#xff0c;页面显示用户提交的表单信息&#xff08;在 id 为 result 的元素显示&#…

Redis高性能IO模型剖析

Redis的高性能IO模型主要归功于其内部精心设计的机制&#xff0c;包括单线程模型、IO多路复用技术、高效的数据结构以及内存操作等。下面我们将逐一剖析这些关键因素。 首先&#xff0c;Redis采用单线程模型来处理网络IO和键值对读写操作。这种设计避免了多线程间的竞争和同步…

OxyPlot 导出图片

在 OxyPlot 官方文档 https://oxyplot.readthedocs.io/en/latest/export/index.html 中查看 这里用到的是导出到 PNG 文件的方法&#xff0c;不过用的 NuGet 包最新版&#xff08;2.1.0&#xff09;中&#xff0c;PngExporter 中并没有 Background 属性&#xff1a; 所以如果图…

【C语言】C语言内存函数

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《C语言》 &#x1f389;道阻且长&#xff0c;行则将至 前言 这篇博客是关于C语言内存函数(memcpy,memmove,memset,memcmp)的使用以及部分的模拟实现 memcpy,memmove,memset,memc…

一文搞懂“ReentrantReadWriteLock——读写锁”

文章目录 初识读写锁ReentrantReadWriteLock类结构注意事项 ReentrantReadWriteLock源码分析读写状态的设计HoldCounter 计数器读锁的获取读锁的释放写锁的获取写锁的释放 锁降级 初识读写锁 Java中的锁——ReentrantLock和synchronized都是排它锁&#xff0c;意味着这些锁在同…

Python高级语法

Python高级语 1 列表推导式1.1 什么是列表推导式1.2 列表推导式的使用 2 字典推导式2.1 什么是字典推导式2.2 字典推导式的使用 3 元组推导式4 集合推导式5 三元表达式5.1 什么是三元表达式5.2 三元表达式的使用 1 列表推导式 1.1 什么是列表推导式 列表推导式的英文&#xf…

docker安装配置dnsmasq

docker下载安装 参考&#xff1a;docker安装、卸载、配置、镜像 如果是低版本的额ubuntu&#xff0c;比如ubuntu16.04.7 LTS&#xff0c;为了加快下载速度&#xff0c;参考&#xff1a;Ubuntu16.04LTS安装Docker。 docker安装dnsmasq 下载dnsmasq镜像 首先镜像我们可以选择…

代码随想录 动态规划-完全背包问题

52. 携带研究材料 时间限制&#xff1a;1.000S 空间限制&#xff1a;128MB 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验…

Could not locate zlibwapi.dll. Please make sure it is in your library path!

背景 运行PaddleOCR时&#xff0c;用的CUDA11.6配的是cuDNN8.4。但是运行后却报错如下。 解决手段 去网上找到这两个文件&#xff0c;现在英伟达好像不能下载了&#xff0c;但是可以去网盘下载。然后把dll文件放入CUDA11.6文件下的bin目录&#xff0c;而lib文件放入CUDA11.6文…