jiuchengwrong 2015-02-17 01:07 采纳率: 50%
浏览 7607

canvas如何原地绕文字中心旋转

图片说明

即实现上图这种效果，我只能做到旋转，但总是不在正确的位置，求大神贴个源码我参照一下(目标对象是文字，不是线条)

  • 写回答

2条回答 默认 最新

  • danielinbiti 2015-02-17 01:41
    关注
     <!DOCTYPE HTML>
<html>
<head><title>canvas</title><meta charset="utf-8" /></head>
<body>
<canvas id="canvas" width="600"height="400" style="border:1px solid black">   
         <p>Your browserdoes not support the canvas element!</p>   
</canvas>   
<script type="text/javascript">
var endX=200;
var endY=100;
var end='11111111111111111111';
var canvas =document.getElementById("canvas");   
var ctx =canvas.getContext("2d");
ctx.beginPath();

ctx.fillStyle = "#000000";

ctx.font = "52pt 楷体";
ctx.textAlign = "center";
ctx.fillText(this.end, endX, endY);

ctx.save();
ctx.translate(endX, endY);
ctx.rotate(Math.PI/6);
ctx.fillText("文字2", 0, 0);
ctx.restore();
</script>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境