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. HBase架构解析

    Hbase组件  客户端Client 整个HBase集群的入口 使用HBase RPC机制与HMaster和HRegionserver通信 与HMaster通信进行管理类的操作 与HRegionse ...

  2. tensorflow_gpu-1.2.1-cp35-cp35m-win_amd64.whl文件怎么安装？

    当你从迅雷下载之后,怎么样来安装上面的文件呢? 这也是一个问题,对于新手来说,是不知道的.其实比较简单,如下: 用命令:pip  install tensorflow_gpu-1.2.1-cp35-c ...

  3. 11.Linux启动过程详解

    目录: 本文转载自:http://blog.csdn.net/miss_acha/article/details/50004717 经过对Linux系统有了一定了解和熟悉后,想对其更深层次的东西做进一 ...

  4. [Python] print中的左右对齐问题

    一.数值类型(int.float) #  %d.%f是占位符>>> a = 3.1415926>>> print("%d"%a)    #%d只 ...

  5. learn go ifelse

    package main // 参考文档: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/05.1.md im ...

  6. kubeadm搭建kubernetes集群之一：构建标准化镜像

    使用docker可以批量管理多个容器,但都是在同一台电脑内进行的,这在实际生产环境中是不够用的,如何突破单机的限制?让多个电脑上的容器可以像单机上的docker-compose.yml管理的那样方便呢 ...

  7. 一次Mysql连接池卡死导致服务无响应问题分析(.Net Mysql.Data 6.9.9)

    问题: 进程启动后,线程数迅速上升至最小线程数后,缓慢上升(线程池限制)到数千,然后由于线程过多,CPU飙升到90%. 对外表现为Api无响应或连接超时. 背景 有些数据存在于另一个机房,通过内网专线 ...

  8. LintCode题解

    JAVA代码:https://github.com/tw1996/LintCode 持续更新

  9. for(j=0,i=0;j

    for(j=0,i=0;j<6,i<10;j++,i++) { k=i+j; } k 值最后是多少? <script type="text/javascript" ...

  10. Tornador之初识（一）

    一.最简单的web服务器 import socket def handle_request(client): buf = client.recv(1024) client.send("HTT ...