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. C#中PadLeft和PadRight小知识点

    当我们显示字符串数据时,有时候我们需要考虑数据的排列美观. 比如一些人名和一些编号,我们想让他们整齐对齐显示等. C# String类提供了2种操作方法: String.PadLeft(int tot ...

  2. zookeeper 学习命令

    ls /TianheSoft/nodesls /TianheSoft/nodes/localhost_2181-0000000000ls /TianheSoft/propsls /TianheSoft ...

  3. DevOps实践

    云计算 [ 01 ]GitLab+Rancher实践DevOps[转载] [ 02 ]Kubernetes CentOS 7.4搭建Kubernetes 1.8.5集群 kubeadm搭建kubern ...

  4. day3 文件系统 内核模块 ctags

    nfs网络文件系统 smb   修改配置文件  sudo  vim /etc/samba/smb.conf    重启服务   /etc/init.d/samba restart 自制小的文件系统 1 ...

  5. 学校项目过程中知识点 Java 2015/9/15 晚

    ##命令行运行Java程序1.文件Java的源代码存放在扩展名为“.java”的文件中:Java源文件编译后,得到“.class”的文件2.方法命令行下编译java源代码的方法:javac  文件名. ...

  6. BZOJ4518 Sdoi2016 征途 【斜率优化DP】 *

    BZOJ4518 Sdoi2016 征途 Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地.除第m ...

  7. 异步任务中的重新进入（Reentrancy）

    一个按钮,点击执行一个任务.我们可能直接在它的 Click 事件中写下了执行任务的代码. 一般我们无需担心这样的代码会出现什么问题——但是,这样的好事情只对同步任务有效:一旦进入了异步世界,这便是无尽 ...

  8. scrapy 的基本命令

    scrapy stratproject projectname  ##创建一个项目 scrapy genspider myspidername fider  ##创建一个spider文件 scrapy ...

  9. 安装WampServer关闭mysql服务后打不开了（端口冲突）

    1.WampServer自带了mysql精简班的数据库了 2.WampServer自带 的mysql和你独立安装的mysql端口号冲突了 3.mysql默认的端口号是3306 4.建议你修改WampS ...

  10. Clair：CoreOS发布的开源容器漏洞分析工具

    Clair为何而生:提升安全 软件世界里,安全漏洞会一直存在.好的安全实践意味着要对可能出现的事故未雨绸缪 - 即尽早发现不安全的软件包,并准备好快速进行升级.而Clair就是设计来帮助你找出容器中可 ...