从零开始学习在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.hqwc.cn/news/548957.html

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

相关文章

8.6 Springboot项目实战 Spring Cache注解方式使用Redis

文章目录 前言一、配置Spring Cache1. @EnableCaching2. 配置CacheManager3. application.properties配置二、使用注解缓存数据1. 使用**@Cacheable** 改造查询代码2. 使用**@CacheEvict** 改造更新代码前言 在上文中我们使用Redis缓存热点数据时,使用的是手写代码的方式,这…

win下 VirtualBox 自动启动脚本脚本

文章目录 一、找到VBoxManage二、测试脚本1、打开cmd2、输入命令 (直接把上面找到的VBoxManage.exe 拖入到cmd中&#xff0c;这样就不用输入路径了)3、效果展示 比如虚拟机中的系统名称叫“centos-mini” 三、设置自动启动脚本1、复制刚才测试好的命令到新建文本中2、修改文本名…

谷歌google adsense广告申请提示:网站已下线或无法访问

自己在运营网站时&#xff0c;想在网站上挂google adsense广告&#xff0c;但是申请很多次&#xff0c;收到的邮件都是您需要先纠正一些问&#xff0c;登陆google adsense后台显示&#xff0c;网站已下线或无法访问。 重新申请多次问题依旧&#xff0c;我在想为什么国外无法访…

轻松打造完美原型:9款在线工具推荐

早年&#xff0c;UI设计师选择的工具有限&#xff0c;功能相对单一&#xff0c;大多数在线原型设计工具都是国外的&#xff0c;语言和网络都增加了设计工作的负担。如今&#xff0c;国内外有许多在线原型设计工具&#xff0c;不仅可以在浏览器上使用&#xff0c;而且还具有团队…

分享一个不错的three.js开源项目

项目将three.js相关内容封装为相应库 很值得学习&#xff0c;可以模仿项目学习three.js vue-vite-three.js threejs-park: 基于vue3&#xff0c;threeJS智慧园区 threejs-park

登录-前端部分

登录表单和注册表单在同一个页面中&#xff0c;通过注册按钮以及返回按钮来控制要显示哪个表单 一、数据绑定和校验 &#xff08;1&#xff09;绑定数据&#xff0c;复用注册表单的数据模型&#xff1a; //控制注册与登录表单的显示&#xff0c; 默认false显示登录 true时显…

用`ORDER BY RAND()`随机化你的查询结果

[TOC](用ORDER BY RAND()随机化你的查询结果) 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb; 《java 面试题大全》 《java 专栏》 &#x1f369;惟余辈才疏学浅&#xff0c;临摹之作或有不妥之处&#xff0c;还请读者海涵指正。☕&…

操作系统系列学习——信号量临界区保护

文章目录 前言信号量临界区保护 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈…

理论学习:with torch.no_grad()

如果不加上“with torch.no_grad():”&#xff0c;模型参数会发生改变吗&#xff1f; 如果不使用with torch.no_grad():&#xff0c;在进行模型推理&#xff08;即计算outputs_cls net(inputs[batch_size//2:])这一步&#xff09;时&#xff0c;模型参数不会发生改变&#xf…

计算机组成原理-1-计算系统概论

1. 计算系统概论 文章目录 1. 计算系统概论1.0 课程概貌1.1 计算机系统简介1.2 计算机的硬件框图1.3 计算机的工作步骤1.4 计算机硬件的主要技术指标 本笔记参考哈工大刘宏伟老师的MOOC《计算机组成原理&#xff08;上&#xff09;_哈尔滨工业大学》、《计算机组成原理&#xf…

【已解决】MySQL:常用的除法运算+精度处理+除数为0处理

目录 问题现象&#xff1a; 问题分析&#xff1a; 拓展&#xff1a; 1、除法运算&#xff1a; 拓展&#xff1a;MySQL中常用的几种除法运算 1、取整除法 2、浮点数除法 3、取余除法 4、向上取整除法 5、向下取整除法 2、运算结果的精度处理 1.1、浮点数 1.2、总位数 1.3、…

考研数学|跟武忠祥,刷什么习题集效果最好?

选择听哪位老师的课程并不是硬性规定。我个人觉得&#xff0c;关键在于根据自己的学习需求和情况来选择合适的学习方式。比如如果听武忠祥老师的课程可能更适合你&#xff0c;你可以选择武忠祥老师&#xff1b;而如果你希望通过大量的题目练习来提高解题能力&#xff0c;那么选…