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. Android响应式UI教程

    原文:Responsive UI Tutorial for Android 作者:James Nocentini 译者:kmyhy 2017/5/4 更新说明: 由 James Nocentini 更 ...

  2. Thread之七：Object里的wait、notify、notifyAll的使用方法

    wait().notify().notifyAll()是三个定义在Object类里的方法,可以用来控制线程的状态 public final native void notify(); public f ...

  3. HDU 1043

    http://acm.hdu.edu.cn/showproblem.php?pid=1043 http://www.cnblogs.com/goodness/archive/2010/05/04/17 ...

  4. iOS日期加一个月的方法

    NSCalendar *calender2 = [[NSCalendar alloc]initWithCalendarIdentifier:NSCalendarIdentifierGregorian] ...

  5. Swift 发送邮件和发短信

    // MARK: - Action // MARK: compose mail 发送邮件 @IBAction func composeMail(sender: AnyObject) { // 判断能否 ...

  6. manacher 算法 这个人确实写得太好了；

    O(n)回文子串(Manacher)算法 资料来源网络 参见:http://www.felix021.com/blog/read.php?2040 问题描述: 输入一个字符串,求出其中最大的回文子串. ...

  7. HDU1800 hash+去前导0

    注意一:卡map的时间,但是好好写+运气还是可以卡过,哇...求人品爆发 注意二:去前导0,毕竟‘0’也有ASCII码 #include<cstdio> #include<cstdl ...

  8. 微软 Windows 系统检测网络连通性（用于显示感叹号）竟然是通过访问一个特殊网址来实现的

    一次我走到了弱网环境中,意外地发现浏览器打开了 http://www.msftconnecttest.com/redirect 网址,随后右下角的网络图标出现了一枚“感叹号”.   吹水的推断 从直观 ...

  9. {Reship}{Sparse Representation}稀疏表示入门

    声明:本人属于绝对的新手,刚刚接触“稀疏表示”这个领域.之所以写下以下的若干个连载,是鼓励自己不要急功近利,而要步步为赢!所以下文肯定有所纰漏,敬请指出,我们共同进步! 踏入“稀疏表达”(Sparse ...

  10. BW数据加载

    BW数据加载的优先级   1.主数据属性的加载 步骤图  从下到上 1)运行InfoPackage加载到PSA 找到主数据属性的InfoPackage,双击  点击Start按钮  点击监视器,查看运 ...