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. Deep Learning深入浅出

    作者:Jacky Yang链接:https://www.zhihu.com/question/26006703/answer/129209540来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  2. yxy-插入formid-并发/压力(入参的变量化)

    1.抓取接口如下 2.该接口为插入数据库操作,由于前段操作频繁,就简单压测一下 接口中formId.accountId.openId为变量 formId为随机生成插入:accountId.openId ...

  3. 基于Ubuntu16.04的GeForce GTX 1080驱动安装，遇到的问题及对应的解决方法

    1．在主机上插上GPU之后,查看设备: $ nvidia-smi Tue Dec :: +------------------------------------------------------- ...

  4. python基础(二)----数据类型

    Python基础第二章 二进制 字符编码 基本数据类型-数字 基本数据类型-字符串 基本数据类型-列表 基本数据类型-元组 可变.不可变数据类型和hash 基本数据类型-字典 基本数据类型-集合 二进 ...

  5. linux c++ 服务器端开发面试必看书籍

    摘自别人博客,地址:http://blog.csdn.net/qianggezhishen/article/details/45951095 打算从这开始一本一本开始看 题外话: 推荐一个 githu ...

  6. U盘传送容量与格式问题

    问题 今天想将7.6G的文件拷到U盘里,提示u盘内存不足,其实内存为14+G. 解答 U盘格式对于U盘的传送大小有限制 下面为U盘三种不同格式的应用及优缺点 FAT32格式:为系统默认格式,具有极佳的 ...

  7. 【Python】下载图片

    import requests import bs4 import urllib.request import urllib import os hdr = {'User-Agent': 'Mozil ...

  8. maven报错【Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of】

    [自己的操作] (1)windows -> Preferences -> maven 的settings.xml文件中.m2的位置已经失效,更改正确后尝试 (2)pom.xml还有下面错误 ...

  9. pat乙级 1091 N-自守数 （15 分）

    如果某个数 K 的平方乘以 N 以后,结果的末尾几位数等于 K,那么就称这个数为“N-自守数”.例如 3×92​2​​=25392,而 25392 的末尾两位正好是 92,所以 92 是一个 3-自守 ...

  10. 【DUBBO】Dubbo:monitor的配置

    [一]:配置项 <dubbo:monitor protocol="registry"/> [二]:配置解析器-->具体解析器为com.alibaba.dubbo. ...