canvas设置文字阴影

在这里插入图片描述

查看专栏目录

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

文章目录

    • 语法:
    • 参数:
    • 示例效果图
    • 示例源代码(共81行)
    • canvas基本属性
    • canvas基础方法

如何使用canvas设置文字阴影呢?canvas内置了一个阴影的方法,使用ctx.shadowBlur即可。文字的填充色使用fillStyle,文字的边框颜色使用strokeStyle。

语法:

context.shadowBlur = value;

参数:

value 用来指定阴影的模糊程度。默认值是0,表示不模糊。

下面是大剑师的一个示例,供参考:

示例效果图

在这里插入图片描述

示例源代码(共81行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-05
*/
<template><div class="djs_container"><div class="top"><h3>canvas设置文字阴影</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw()">绘制</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");},draw() {this.ctx.shadowColor = 'red';this.ctx.shadowBlur = 10;this.ctx.font = '100px STheiti, simHei';this.ctx.fillStyle="blue"this.ctx.fillText('还是大剑师兰特', 140, 190);},}}
</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/597375.shtml

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

相关文章

实现JavaScript中的数组排序功能

一、引言 在JavaScript中&#xff0c;数组是一种常用的数据结构&#xff0c;而排序是处理数组的常见任务。对于JavaScript中的数组排序&#xff0c;我们可以通过多种方式来实现。本篇博客将详细介绍如何使用JavaScript实现数组排序功能&#xff0c;并分享一些感悟。 二、实现…

SQL的一些基本语句

SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系型数据库的语言。下面是一些常用的SQL基本语句&#xff1a; 创建表格&#xff1a; CREATE TABLE table_name (column1 datatype,column2 datatype,column3 datatype,... );插入数据&#xff1a; INSERT…

详解C语言入门程序:HelloWorld.c

#include <stdio.h> // 头文件&#xff0c;使用<>编译系统会在系统头文件目录搜索在C语言中&#xff0c;#include 是预处理指令&#xff0c;用于将指定的头文件内容插入到当前源文件中。这里的 <stdio.h> 是一个标准库头文件&#xff0c;其中包含了与输入输出…

MySQL之CRUD、常见函数及union查询

目录 一. CRUD 1.1 什么是crud 1.2 SELECT(查询) 1.3 INSERT(新增) 1.4 UPDATE(修改) 1.5 DELETE(删除) 二. 函数 2.1 常见函数 2.2 流程控制函数 2.3 聚合函数 三. union与union all 3.1 union 3.2 union all 3.3 具体不同 3.4 结论 四. 思维导图 一. CRUD 1.1 什么是crud…

解析:Eureka的工作原理

Eureka是Netflix开源的一个基于REST的的服务发现注册框架&#xff0c;它遵循了REST协议&#xff0c;提供了一套简单的API来完成服务的注册和发现。Eureka能够帮助分布式系统中的服务提供者自动将自身注册到注册中心&#xff0c;同时也能够让服务消费者从注册中心发现服务提供者…

【愚公系列】2023年12月 HarmonyOS应用开发者高级认证(完美答案)

&#x1f3c6; 作者简介&#xff0c;愚公搬代码 &#x1f3c6;《头衔》&#xff1a;华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xf…

express框架搭建后台服务

express 1. 使用express创建web服务器&#xff1a;2. 中间件中间件分类&#xff1a; 3.解决跨域问题&#xff1a;1. CORS2.JSONP 1. 使用express创建web服务器&#xff1a; 1. 导入express2. 创建web服务器3. 启动web服务器// 1. 导入express const express require(express)/…

6. Mybatis 缓存

6. Mybatis 缓存 MyBatis 包含一个非常强大的查询缓存特性,它可以非常方便地配置和定制。缓存可以极大的提升查询效率MyBatis系统中默认定义了两级缓存 一级缓存二级缓存 默认情况下&#xff0c;只有一级缓存&#xff08;SqlSession级别的缓存&#xff0c;也称为本地缓存&…

Transforer逐模块讲解

本文将按照transformer的结构图依次对各个模块进行讲解&#xff1a; 可以看一下模型的大致结构&#xff1a;主要有encode和decode两大部分组成&#xff0c;数据经过词embedding以及位置embedding得到encode的时输入数据 输入部分 embedding就是从原始数据中提取出单词或位置&…

ubuntu22.04配置双网卡绑定提升带宽

这里写自定义目录标题 Bonding简介配置验证参考链接 Bonding简介 bonding(绑定)是一种linux系统下的网卡绑定技术&#xff0c;可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡&#xff0c;能够提升网络吞吐量、实现网络冗余、负载均衡等功能&#xff0c;有很…

软件设计师考试的知识点

这里先总结一下考试的知识点。 上午的考试考题中只有单选题&#xff0c;涉及范围很广&#xff0c;但是考查不深。 上午的考试知识点以及分数比重&#xff1a; 知识点 分数 说明 比例 软件工程基础知识 13 开发方法与开发模型、数据流图与数据字典、结构化设计、测试方法…

2023年工作初体验

23年终于正式入职&#xff0c;参与了正式上线的电商平台、crm平台等项目的研发&#xff0c;公司规模较小&#xff0c;气氛融洽&#xff0c;没有任何勾心斗角、末位淘汰&#xff0c;几乎没什么压力。虽然是我的第一家公司&#xff0c;但实际是个适合养老的公司&#xff08;笑 总…

双击shutdown.bat关闭Tomcat报错:未设置关闭端口~

你们好&#xff0c;我是金金金。 场景 当我startup.bat启动tomcat之后&#xff0c;然后双击shutdown.bat关闭&#xff0c;结果报错了~ 排查 看报错信息很明显了&#xff0c;未配置关闭端口&#xff0c;突然想起来了我在安装的时候都选的是默认的配置&#xff0c;我还记得有这…

快速批量运行命令

Ansible 是 redhat 提供的自动化运维工具&#xff0c;它是 Python编写&#xff0c;可以通过 pip 安装。 pip install ansible 它通过任务(task)、角色(role)、剧本(playbook) 组织工作项目&#xff0c;适用于批量化系统配置、软件部署等需要复杂操作的工作。 但对于批量运行命…

简单罗列一下jdk常见的垃圾收集器

1. Serial Collector 类型&#xff1a;单线程收集器。工作模式&#xff1a;使用标记-压缩算法进行老年代的垃圾收集&#xff0c;标记-复制算法进行年轻代的垃圾收集。特点&#xff1a;简单高效&#xff0c;适用于单核处理器或小型堆内存。在进行垃圾收集时&#xff0c;会暂停所…

nginx日志目录详解

Nginx 默认会打印访问日志&#xff08;access log&#xff09;和错误日志&#xff08;error log&#xff09;。这些日志对于监控和调试网站非常有用。以下是关于如何配置和查看 Nginx 日志的一些基本信息&#xff1a; 配置 Nginx 日志 访问日志&#xff08;Access Log&#xf…

宝塔部署nuxt3项目问题解决

使用宝塔部署nuxt3项目一直没成功&#xff0c;网站502&#xff0c;要不就是资源加载不出来 测试使用宝塔版本8.0.4 添加node项目方式失败&#xff0c;项目更目录设置到server,无法设置运行目录为public, 导致网站资源加载不出来&#xff0c;设置到.output目录&#xff0c;会提…

继电器组开发控制

也是通过树莓派IO口的控制来实现继电器组的开发 继电器组有四根信号线&#xff0c;2根电源线。 通过gpio readall 查看树莓派各个端口的信息选择26 27 28 29 作为信号端口 编程可能会遇到的一些问题 1、通过键盘输入指令的时候&#xff0c;如果用scanf 会有bug&#xff0c;导…

JavaScript高级程序设计读书记录(一):语言基础,语法,变量,数据类型

1. 语法 很大程度上借鉴了 C 语言和其他类 C 语言&#xff0c;如 Java 和 Perl. 1.1 区分大小写 1.2 标识符 第一个字符必须是一个字母、下划线&#xff08;_&#xff09;或美元符号&#xff08;$&#xff09;&#xff1b; 剩下的其他字符可以是字母、下划线、美元符号或数…

排除启动类故障----三大实验

目录 一、模拟破坏mbr和分区表然后修复 二、修复grub引导故障 三、遗忘root用户密码 一、模拟破坏mbr和分区表然后修复 1、mbr处于第一块磁盘的第一个物理扇区&#xff0c;总共512个字节&#xff0c;前446个字节是grub程序&#xff0c;后面64个字节是分区表 2、故障原因&a…