canvas 文本旋转 90°

最新推荐文章于 2024-06-03 15:08:24 发布
最新推荐文章于 2024-06-03 15:08:24 发布
阅读量4.7k 收藏 2
点赞数
分类专栏： javascript web前端 文章标签： canvas 3d javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/npl2580/article/details/116998131
版权

接到个需求，文字在canvas里面绘制90度，再贴到地图里面做纹理

 

最终效果

先看调试效果

罗字是正常文字，“测”、“路”是旋转后的理想文字效果

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.save();
//ctx.font="20px Georgia";
//ctx.fillText("Hello World!",10,50);
ctx.translate(115,60);
ctx.rotate(-90*Math.PI/180);
ctx.textBaseline = 'middle'
ctx.font="30px Verdana";
ctx.fillStyle='blue';
ctx.fillText("测",0,0);
//ctx.save();
ctx.restore();
ctx.save();
ctx.translate(165,60);
ctx.rotate(-90*Math.PI/180);
ctx.textBaseline = 'middle'
ctx.font="30px Verdana";
ctx.fillStyle='blue';
ctx.fillText('路',0,0);

ctx.restore();

//ctx.translate(145,115);
//ctx.rotate(-90*Math.PI/180);
ctx.textBaseline = 'middle'
ctx.font="30px Verdana";
ctx.fillStyle='blue';
ctx.fillText('罗',60,45);



</script>

</body>
</html>

 

 

需要用到的关键 Canvas API

rotate(angle) 旋转用，如这里旋转了-90°

translate 移动中心点

save

restore

 

 

主要的坑

说下主要遇到的坑，一开始接到需求，认为不就旋转下文字么，简单，查下api rotate，然后一用，没效果 坑

查下api相关资料说明，rotate的旋转不是针对旋转绘制的图性文字这些，而是旋转整个画布

所以就需要用到 translate，改变中心点再旋转，然后针对性的调整下细节位置

 

 

实际生产应用效果

调研完毕就是实际应用了，上一个实际效果，主要就是作为路面文字贴图，易于阅读

 

 

 

 

 

 

 

 

 

程序员查理
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas文字旋转功能
weixin_41837346的博客
04-13 4882
功能实现：使canvas文字围绕其中心点旋转 思路 平移画布，使画布中心点和文字的中心点重合（画布中心点默认在左上角点） 重新计算文字的起始点坐标 效果图 <!DOCTYPE html> <html> <style> canvas { background-color: red; } </style> &...
小程序 canvas旋转文字
沫沫酱
07-02 9393
效果如下图：js部分： //canvas画图片 savedetailCanvas: function () { //['消费者', '知性', '形象力', '形象力', '靓丽', '逛街中', '魅力四射', '小姐姐'] var that = this; const ctx = wx.createCanvasContext('savePic'); ctx.draw...
canvas旋转绘图
03-02
博文《 Android画布canvas rotate，translate的理解》http://blog.csdn.net/peak1chen/article/details/50776507demo下载链接
JS通过canvas获取旋转90度后的图片
最新发布
feiyu的博客
06-03 310
通过canvas获取旋转后的图片
js的Canvas逆时针旋转90度
l1134的博客
09-25 2871
js的Canvas逆时针旋转90度
canvas实现图片旋转并保存
qq_43585229的博客
09-01 5086
html部分 <body> <div class="container"> <div class="source"> <img id="nc" src="./assets/btbg.jpg" alt="" srcset=""> <!-- <img id="nc" src="./assets/奶茶.webp" alt="" srcset=""> --> </div> &lt
Canvas自定义文字旋转缩放渲染
ㄏ、Forgetˊ的博客
10-10 3055
最近遇到一个新需求，需要以给定的参数，在Canvas画板上渲染还原文字。 参数如下： translateX（X轴方向上的偏移量）：0 translateY（Y轴方向上的偏移量）：92 scaleX（X轴上的缩放量）：1 scaleY（Y轴上的缩放量）：1 rotate（旋转角度）：25 fontSize（字体大小）：16 fontFamily（字体集）：‘微软雅黑’ color（字体颜色）：‘rgb(229,80,80)’ txt（带换行的文本，换行标识为\n）：‘我不行了\n快扶我去喝酒’ 要求： 文
canvas图片旋转自适应容器宽度实践
12-12
本实践主要探讨的是如何使用Canvas实现图片的旋转，并在每次旋转90度后自动调整宽度以适应容器，保持等比缩放，确保图片不失真。 首先，我们需要在HTML中创建一个`<canvas>`元素，并设置其宽度和高度，以及关联一个...
HTML5 Canvas旋转文本动画
08-05
HTML5 Canvas是Web开发中的...总之，HTML5 Canvas提供了强大的功能，让我们能够在浏览器中创建出各种视觉效果，包括文本旋转动画。通过理解并熟练运用Canvas API，开发者可以打造出富有创新性和吸引力的网页交互体验。
canvas 原位置旋转图片
08-25
本文将详细讲解如何在Canvas上实现原位置旋转图片，并通过`translate`和`rotate`两个关键方法来理解这一过程。 首先，我们需要创建一个Canvas元素并在HTML中插入它： ```html <!DOCTYPE html> <title>Canvas ...
H5 Canvas点线图形旋转特效
07-24
本主题聚焦于"H5 Canvas点线图形旋转特效"，这是一种利用Canvas 2D渲染上下文来实现的动画效果，通过绘制点和线，并让它们以特定方式旋转，创造出引人入目的动态图形。 首先，要理解Canvas的基本绘图操作。Canvas ...
Canvas制作旋转的太极的示例
09-27
通过`-webkit-transform`、`-moz-transform`等前缀和`transform: translate(-50%,-50%)`确保Canvas元素居中显示，然后通过`@keyframes`定义了一个名为`testAnimate`的动画，让Canvas元素从0度旋转到360度，实现了...
canvas笔记-文本（fillText）旋转（rotate）
細水、長流√的专栏
12-21 3614
这里fillText直接使用rotate会有问题。估计是旋转中心有问题。 正确的逻辑为： 先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。 如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。 程序运行截图如下： 绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。 代码如下： <!DOCTYPE html> <html lang="en"> <h.
canvas旋转图片
qq_38698753的博客
08-26 2099
最近写小程序遇到一个需求，需要旋转图片再上传到服务器，就想到了用canvas来实现。 描述 <canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 在原生写法里， getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 在小程序里，微信提供了新的接口： CanvasContext canvas...
学习Canvas基础-位移、缩放、旋转
qq_67983277的博客
11-28 1944
学习Canvas基础-位移、缩放、旋转
HTML5绘图之文字旋转
wanglei9876开发人生
02-12 3867
HTML5绘图之文字旋转在GDI/GDI+中文字旋转是一件比较容易的事情，HTML5的Canvas中的旋转与GDI/GDI+中的旋转稍微有点差异。 canvas的rotate是针对画布进行的，也可以理解为OPENGS的状态机，对于画布来讲是全局的。所以要想在指定位置将文字旋转显示，那么就先将画面的原点移动到该位置，然后旋转画布，最后在（0，0）位置输出文字，记得一定是（0，0）位置哦。
纯样式或使用JS的canvas实现图片旋转
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-20 3037
原理大致是，将img图片转为canvas对象，输出新的图片路径，回显到img标签中。点击旋转，图片也跟着旋转。共有4个方向，分别是0，90，180，270度。实际情况也是可以旋转的，简单方便，只适用于临时查看。祝你能成为一名优秀的WEB前端开发工程师！如果是按照我的思路，那自然就是使用。以上在vue项目中使用无任何问题。
用canvas将base64图片旋转90度的倍数
weixin_42889916的博客
06-16 867
参考文章：https://blog.csdn.net/qq_36947128/article/details/112020379。参考了其他文章上面再根据项目需求优化了一下。用async await 得到图片。
canvas旋转90°的算法
05-23
要将canvas旋转90度，可以使用以下步骤： 1. 保存canvas当前的状态 ``` ctx.save(); ``` 2. 将canvas的原点移到canvas中心 ``` ctx.translate(canvas.width / 2, canvas.height / 2); ``` 3. 以原点为中心旋转90度 ``` ctx.rotate(Math.PI / 2); ``` 4. 将canvas的原点移回左上角 ``` ctx.translate(-canvas.height / 2, -canvas.width / 2); ``` 5. 恢复canvas之前保存的状态 ``` ctx.restore(); ``` 完整代码示例： ``` ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(Math.PI / 2); ctx.translate(-canvas.height / 2, -canvas.width / 2); // 在旋转后的canvas上绘制图形 ctx.restore(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员查理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值