HTML - Canvas 使用画布旋转文本_canvas 插入文字并旋转文字90° 旋转后仍然局中-程序员宅基地

前言

HTML5中的画布元素不只是能给文本着色或者添加阴影，你也可以用它来移动或操作位于画布区域中的元素对象。在本节中，我们将旋转位于画布中的元素对象。

准备工作

学习本节需要掌握之前的几节。如果跳过了之前的几节也没关系，你还可以参照完整代码来学习。

实现方式

一旦你完成了之前技巧中的画布设置步骤，那么实现旋转的基本步骤很简单。在函数开头添加一个rotate方法的调用。

你可能会发现位于画布上的文本向右旋转了。怎么回事？无论画布中含有什么元素，rotate方法默认会旋转整个画布。
画布的默认尺寸较小，为300px宽，150px高。修改画布中所含元素的尺寸属性不会影响画布尺寸，但会使画布中的元素对象失真。如果要修改画布及画布中元素的尺寸，可以通过在JavaScript中设置canvas.width和canvas.height属性来完成。

另外，因为整个画布自身被旋转了，但是文本旋转并没有围绕特定的参照点，因此文本位置需要被重新定位到正确位置。在本例子中，需要设置填充和笔画的偏移：

效果如下图所示。

工作原理

JavaScript能够通过rotate方法来旋转整个画布以及绘制在画布中的所有元素。只是在决定使用该方法时需要预先考虑所使用的场景和进行相关设置。虽然看起来有些复杂，但这不失为在大型web项目中实现响应式设计的理想工具。

本文链接：https://blog.csdn.net/Dream_Weave/article/details/86816736

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

qt 5.12.11 + vs 2019 32位静态编译qt 带有 openssl （踩坑实例记录）_vs2019静态编译qt-程序员宅基地

文章浏览阅读1.5k次，点赞2次，收藏3次。如题如题为啥编译openssl？因为之前搞的静态编译做的卸载包没有问题, 后面加入了埋点上报https的没有openssl的支持 https请求会错误,并且无法动态链接,故要在编译qt 源码时候把 openssl加入进去折腾了一整天…如果不编译openssl 请看这篇文章qt 5.12.11 + vs 2019 32位静态编译qt 环境配置啥的这里不多说请看上面的文章.1. openssl 版本选择我编译了1.1.1 .81.0.11.1.0三个版本最后这个1.1.0_vs2019静态编译qt

oracle入门很简单：四、本地Net服务名配置_oracle本地net服务名配置0-程序员宅基地

文章浏览阅读2.6k次。默认情况下，利用客户端工具，例如，sqlplus、PL/SQL Developer等连接数据库时，并不会直接使用数据库的SID，而是通过本地Net服务名。所谓本地，是指Oracle客户端。本地Net服务名的配置中包含了要连接的数据库服务器的主机名、数据库的SID、监听器的端口号等。在开始菜单中，选择“程序”->Oracle - OraDb10g_home1->配置和移植工具->Net Co_oracle本地net服务名配置0

java sql 写入万条数据_如何快速向数据库插1000万数据？4种方法对比，它简单却速度最快-程序员宅基地

文章浏览阅读1.7k次。目录场景介绍项目配置Mybatis为什么慢？JdbcTemplate让我眼前一亮原生JDBC就是快啊！存储过程怎么样？越简单越快前言一直有一种说法：批量插入大量数据到MySQL数据库，不要使用Mybatis、Hibernate之类的ORM框架，原因一般都是说性能不好，至于为什么不好好像没几个人能讲清楚的。批量插入大量数据最优的方式是什么？网上也是众说纷纭。不如自己动手测试一下吧！场景介绍前几天公司..._java 高效地存入一万条数据

车载诊断系列——CANoe基础诊断功能_can oe中basic diag-程序员宅基地

文章浏览阅读1.9k次，点赞2次，收藏9次。如上图诊断控制台是CANo通过加载诊断数据库CDD（当然也支持加载另外一个常见的诊断数据库CDD/PDX），将数据库中编辑的诊断描述内容在人机交互界面显示出来，在测试的时候，工程师使用CANoe，通过硬件接口卡:车载CAN总线使用接口卡VN16系列；车载以太网使用接口卡VN56系列。连接好待测ECU，工程师基于自己项目的测试规范编写的测试用例，手动进行测试即可！注：相比手动测试，在测试流程中还有自动化测试方案：1、一种是半自动化，需要工程师基于需求规范编写测试规范，基于测试规范编写测试_can oe中basic diag

CRC校验 - 基于FPGA的实现_fpga crc校验-程序员宅基地

文章浏览阅读6.1k次，点赞7次，收藏94次。CRC校验 - 基于FPGA的实现0 背景 CRC即循环冗余校验：常用于数据通信领域中，通常由发送端添加校验码于单帧数据的尾部，并由接受方进行提取和校验该帧数据传输是否正确。循环冗余检查（CRC）是一种数据传输检错功能，对数据进行多项式计算，并将得到的结果附在帧的后面，接收设备也执行类似的算法，以保证数据传输的正确性和完整性。1 FPGA硬件实现CRC校验 CRC计算采用模2除法，本质是对应比特位的异或运算。计算原理我仔细推究，通常硬件实现方式分为..._fpga crc校验

[转载]全国高校IPv6地址分配情况-程序员宅基地

文章浏览阅读1.7k次。[code="java"]2001:DA8:0200::/48 清华大学2001:DA8:0201::/48 北京大学2001:DA8:0202::/48 北京邮电大学2001:DA8:0203::/48 北京航天航空大学2001:DA8:0204::/48 北京理工大学2001:DA8:0205::/48 北京交通大学2001:DA8:..._苏州大学ipv6地址

随便推点

codesys字符串仿真时显示乱码问题解决_codesys的在线视图乱码-程序员宅基地

文章浏览阅读290次。解决codesys仿真运行时中文字符串显示乱码问题_codesys的在线视图乱码

Centos7 docker容器启动后添加端口映射_centos docker容器添加端口-程序员宅基地

文章浏览阅读1k次。docker容器启动后添加端口映射的两种方法：一、通过修改防火墙策略添加端口映射docker容器已创建好，但是想在容器内配置tomcat监控，需要新的端口去访问，但是映射时没有映射多余端口，此时，我们可以通过防火墙策略去映射端口，如下：iptables -t nat -A DOCKER -p tcp --dport 12580 -j DNAT --to 172.20.0.3:12580iptables -t nat -A POSTROUTING -p tcp -s 172.20.0.3 -d_centos docker容器添加端口

pytorch混合精度计算代码_torch 1.2不支持amp 怎么修改-程序员宅基地

文章浏览阅读685次，点赞2次，收藏5次。使用混合精度计算可以减少约一半的显存，但是要注意需要torch1.7.1以上。_torch 1.2不支持amp 怎么修改

7个Web前端程序员必须会用CSS技巧-程序员宅基地

文章浏览阅读197次。1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；..._web程序css使用

2011年3月（冷门语言）51-100名的编程语言排名（一般热度语言）21-50名（热门......-程序员宅基地

文章浏览阅读333次。（冷门语言）51-100名的编程语言排名 (Visual) FoxPro, 4th Dimension/4D, ABC, AD, Algol, Alpha, ATLAS, Automator, Avenue, Awk, Beta, Boo, CFML, cg, Clean, ..._冷门语言排行

(B, G, R) = cv2.split(img) ValueError: not enough values to unpack (expected 3, got 1)_b, g, r,h = cv2.split(img) valueerror: not enough -程序员宅基地

文章浏览阅读3k次。cv2.split 出错解决方案：主要是在图像进行通道分离的之前用到了resize，但是在使用过程中是直接对对象进行了操作，而不是调用函数，故有： img = cv2.imread(file) cv2.namedWindow('1', 2) cv2.imshow('1', img) cv2.waitKey(0) image = img.resize((342, 256)) img = cv2.resize(img, (342, 256)) prin_b, g, r,h = cv2.split(img) valueerror: not enough values to unpack (expected