canvas旋转文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        canvas{ border: 1px solid black; }

    </style>

</head>

<body>

    <canvas id="myCanvas" width="500" height="500"></canvas>

    <button type="button" onclick="rotate();">旋转文本</button>

    <script>

        var canvas = document.getElementById("myCanvas");

        var ox = canvas.width / 2;

        var oy = canvas.height / 2;

        var ctx = canvas.getContext("2d");

        ctx.font = "42px serif";

        ctx.textAlign = "center";

        ctx.textBaseline = "middle";

        ctx.fillText("Hello World", ox, oy);

        function rotate() {

            ctx.translate(ox, oy); // 将画布的原点移动到正中央

            ctx.rotate((Math.PI / 180) * 15); // 弧度 = (Math.PI/180)*角度

            ctx.fillText("Hello World", 0, 0);

            ctx.translate(-ox, -oy); // 将画布的原点还原

        };

    </script>

</body>

</html>

canvas旋转文本的更多相关文章

  1. HTML新特性--canvas绘图-文本

    一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...

  2. html5 canvas旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. canvas绘制文本

    canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...

  4. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  5. canvas旋转图片

    canvas旋转图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. Canvas旋转元素

    Canvas是HTML5的画布元素,有时需要按指定角度旋转某一个元素. var canvas = document.getElementById("mycanvas"); var ...

  7. HTML5 Canvas Text文本居中实例

    1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...

  8. Canvas旋转图片--保持相同大小的算法

     function drawImg(angle) {     canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...

  9. Canvas 旋转风车绘制

    写在前面:   亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解,如果本文对你有一丁点帮助,还请劳驾您给我点个赞,您的认可将是我坚持下去的强大动力!谢谢! 在进行教学之前 ...

随机推荐

  1. 从JDK源码角度看Boolean

    Java的Boolean类主要作用就是对基本类型boolean进行封装,提供了一些处理boolean类型的方法,比如String类型和boolean类型的转换. 主要实现源码如下: public fi ...

  2. LR11开始录制时打不开浏览器

    LR11 能支持的浏览器实际上不仅限于 IE8 官方文档没有明确表示支持,可以尝试.官方支持列表如下: ➤ Microsoft Internet Explorer 6.0 SP1 or SP2 ➤ M ...

  3. TCP、UDP详解

    OSI 计算机网络7层模型 TCP/IP四层网络模型 传输层提供应用间的逻辑通信(端到端),网络层提供的是主机到主机的通信,传输层提供的是可靠服务. TCP 中常说的握手指的是:连接的定义和连接的建立 ...

  4. SaltStack简明教程

    第1章 SaltStack简明教程 1.1 SaltStack简介 SaltStack是基于Python开发的一套C/S架构配置管理工具(功能不仅仅是配置管理,如使用salt-cloud配置AWS E ...

  5. with异常

    with 语句 语法: with 表达式1 [as 变量1], 表达式2 [as 变量2], ...: 语句块 作用: 使用于对资源进行访问的场合,确保使用过程中不管是否发生异常都会执行必要的'清理操 ...

  6. 每天一个linux命令（磁盘）：【转载】du 命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  7. Session学习

    Session学习 Session的作用就是在服务器端保存一些用户的数据,然后传递给用户一个名字为JSESSIONID的Cookie,这个JESSIONID对应这个服务器中的一个Session对象,通 ...

  8. python环境搭建-Linux系统下python2.7升级python3.5.2步骤

    首先Python 查看版本 , 在Linux下特别注意权限问题,创建目录时候切记给予权限 如果是 ubnutu 请使用首先切换到 sudo su , 否则 make install 会出现问题.. 升 ...

  9. 关于gradle加快构建速度采用阿里云中央仓库的配置

    近期开始了一段新的开始,在一家在线教育的公司开始下一阶段的工作,鉴于之前的面试中问到了spring的内容基本快要到源码层面的问题了,想要把spring的源码导到idea中,结果出现了下载极慢的问题,如 ...

  10. WinForm窗体继承自定义的模板窗体出错

    在开发Winform程序的时候,我们往往需要根据需要做一些自定义的控件模块,这样可以给系统模块重复利用,或者实现更好的效果等功能.而今天自定义一个窗体,然后子窗体继承的时候出现了一点问题. 问题: 在 ...