canvas基础:渲染文本

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

文章目录

    • 示例效果图
    • 示例源代码(共64行)
    • 给文本添加样式
    • canvas基本属性
    • canvas基础方法

canvas 提供了两种方法来渲染文本。

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本,绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框,绘制的最大宽度是可选的。

示例效果图

在这里插入图片描述

示例源代码(共64行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-02
*/
<template><div class="container"><div class="top"><h3>canvas绘制文字</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi "><canvas id="dajianshi" width="800" height="400" ></canvas></div></div>
</template>
<script>export default {data() {return {}},mounted() {this.getdata()},methods: {getdata() {var canvas = document.getElementById('dajianshi');if (!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.font = "100px sans-serif"ctx.fillText("大剑师兰特", 100, 150);ctx.strokeText("大剑师兰特", 100, 300)},}}
</script><style scoped>.container {width: 1000px;height: 600px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: grey;color: #fff;}.dajianshi {margin: 50px auto 0;width: 800px;height: 400px;background:#f6f6f6;}
</style>

给文本添加样式

font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。

textAlign = value 文本对齐选项。 可选的值包括:start, end, left, right or center。 默认值是 start。

textBaseline = value 基线对齐选项,可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。

direction = value 文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。

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/189305.shtml

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

相关文章

Postman如何导入和导出接口文件

本文介绍2种导出和导入的操作方法&#xff1a;一种是分享链接&#xff0c;导入链接的方式&#xff08;需要登录&#xff09;&#xff1b;另一种是导出json文件&#xff0c;再次导入。下面将详细介绍。 由于第一种分享链接&#xff0c;导入链接的方式需要登录&#xff0c;所以推…

jsp 分页查询展示,实现按 上一页或下一页实现用ajax刷新内容

要实现按上一页或下一页使用 Ajax 刷新内容&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 在前端页面中添加两个按钮&#xff0c;分别为“上一页”和“下一页”。当用户点击按钮时&#xff0c;触发 Ajax 请求。 2. 在后端控制器中接收 Ajax 请求&#xff0c;并根据传…

KNN回归-GridSearchCV模型调优(波士顿房价)

数据集简介 数据介绍 波士顿房价数据集(Boston Housing Dataset) 是一个经典的用于回归分析的数据集。它包含了波士顿地区506个街区的房价信息以及与房价相关的13个特征。这个数据集的目标是根据这些特征来预测波士顿地区房屋的中位数价格(以千美元为单位) 数据说明 Data S…

Vue 3.0 组合式API 生命周期钩子

文章目录 前言配置项api图表on配置项api后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;vue.js &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#xff0…

微软 Power Platform 零基础 Power Pages 网页搭建教程学习实践进阶以及常见问题解答(二)

微软 Power Platform 零基础 Power Pages 网页搭建教程学习实践进阶及常见问题解答&#xff08;二&#xff09; Power Pages 学习实践进阶 微软 Power Platform 零基础 Power Pages 网页搭建教程学习实践进阶及常见问题解答&#xff08;二&#xff09;Power Pages 核心工具和组…

Openwrt 系统安装 插件名称与中文释义

系统镜像 当时是去官网找对应的&#xff0c;但是作为门外汉&#xff0c;想简单&#xff0c;可以试试这个网站 插件 OpenWrt/Lede全部插件列表功能注释

【AUTOSAR】【通信栈】IPduM

AUTOSAR专栏——总目录_嵌入式知行合一的博客-CSDN博客文章浏览阅读310次。本文主要汇总该专栏文章,以方便各位读者阅读。https://xianfan.blog.csdn.net/article/details/132072415 目录 一、概述 二、相关模块 2.1 OS

Java实现获取文件MD5值工具类

我们在工作中通常使用MD5对文件进行校验完整性&#xff0c;比较&#xff0c;提高安全性等&#xff0c;一般MD5有以下几种作用 1.数据完整性验证&#xff1a;MD5值是通过对文件的内容计算生成的固定长度哈希值。如果文件内容发生任何变化&#xff0c;其MD5值也会发生变化。因此…

2023年第十二届数学建模国际赛小美赛B题工业表面缺陷检测求解分析

2023年第十二届数学建模国际赛小美赛 B题 工业表面缺陷检测 原题再现&#xff1a; 金属或塑料制品的表面缺陷不仅影响产品的外观&#xff0c;还可能对产品的性能或耐久性造成严重损害。自动表面异常检测已经成为一个有趣而有前景的研究领域&#xff0c;对视觉检测的应用领域有…

成倍提高生产力工具Notion

成倍提高生产力工具Notion Notion已经成为了很多内容创作者的唯一生产力工具&#xff0c;甚至很多企业已经把Notion当作他们的唯一的工作平台&#xff0c;学习这款软件不仅能提高你的工作效率甚至在职场上也会成为一个吃香的技能&#xff0c;在美国有人制作销售Notion模板&…

【openGauss】如何通过pg_trigger.tgtype获取触发器的各种触发条件

前言 最近有客户反馈兼容的dba_triggers视图中&#xff0c;同一个触发器的trigger_event被拆成了多行&#xff0c;和ORACLE中表现不一致&#xff0c;于是我进行了一些分析&#xff0c;发现是在其引用的information_schema.triggers视图中就已经拆开成了INSERT/DELETE/UPDATE&a…

人工智能基础创新的第二增长曲线

编者按&#xff1a;2023年是微软亚洲研究院建院25周年。借此机会&#xff0c;我们特别策划了“智启未来”系列文章&#xff0c;邀请到微软亚洲研究院不同研究领域的领军人物&#xff0c;以署名文章的形式分享他们对人工智能、计算机及其交叉学科领域的观点洞察及前沿展望。希望…

逆向exe

前言 在使用一个上位机程序时&#xff0c;弹出了试用期已结束&#xff0c;由于有使用它的需求&#xff0c;便想着能不能把它的防御措施给干掉。 0x1 思路 ①通过字符串查找定位弹窗的代码→找到弹窗的条件→fail ②分析main函数→找到弹窗的调用函数 0x2 实操 首先通过在main…

PVE系列-LVM安装MacOS的各个版本

PVE系列-LVM安装MacOS的各个版本 环境配置大概过程&#xff1a;详细步骤&#xff1a;1.建立安装环境和下载安装工具2. 重启后&#xff0c;执行osx-setup配置虚拟机3. 安装到硬盘&#xff0c;4.设定引导盘&#xff0c;以方便自动开机启动5.打开屏幕共享和系统VNC最后的结果 引子…

安装vscode插件与安装vue项目

前提先安装nvm然后安装需要的nodejs 1&#xff1a;点击下载vscode&#xff0c;选择安装目录&#xff0c;一直点击安装就行 2&#xff1a;安装vue-cli脚手架 npm install -g vuecli5.0.4查看vue版本 vue --version卸载脚手架 npm uninstall vue/clinpm uninstall vue创建vue2…

记一次:Python的学习笔记二(Django项目1)

前言&#xff1a;书接上回&#xff0c;认识了Python项目环境&#xff0c;那么开始做一些案例了&#xff0c;笔者是Java出身&#xff0c;接触的也大都是web项目&#xff0c;那么Python的web项目有哪些呢&#xff1f;了解了一下有很多&#xff0c;37个之多&#xff0c;有 Django …

spring cloud gateway源码分析,一个请求进来的默认处理流程

1.前言 spring cloud gateway的基本组成和作用就不细赘述&#xff0c;此篇适合对此有一定了解的人阅读。 spring cloud gateway版本: Hoxton.SR1 spring cloud gateway的配置使用yml配置&#xff1a; server:port: 9527y#根据微服务名称进行动态路由的配置 spring:applicati…

Python实现pdf文件转word文件

日常生活中&#xff0c;当遇到需要将某个PDF文件转换为Word格式文件时&#xff0c;一般是通过一些在线格式转换的网站&#xff0c;或者软件来完成&#xff0c;但我们也可以使用python来完成这个需求&#xff08;当然&#xff0c;这种方法仅能够满足大部分的格式&#xff09;。 …

《Effective C++》条款28

避免返回handles指向对象内部成分 有这样一个类&#xff0c;用左上角和右下角的坐标表示一个矩形&#xff1a; class point { public:point(int a,int b):x(a),y(b){}point& changeX(int _x){point newpoint(_x, y);return newpoint;} private:int x;int y; }; struct Pdat…

人机协同

人机协同是指人和机器之间进行合作和协同工作的方式&#xff0c;人机协同是人工智能技术发展的一个重要方向&#xff0c;通过人机协同的方式&#xff0c;可以充分利用机器的智能和人的智慧&#xff0c;共同实现更高效、更智能的工作和生活方式。人机协同可以应用于各种领域和场…