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. Java之引用类型分析(SoftReference/WeakReference/PhantomReference)

    引言: 即使对于Java的很多老鸟来说,如果忽然问他引用的类型,大概率是一脸茫然,不知所措的-.Java中的引用还分类型,神马情况??? 本文将针对这些类型进行分析,帮助您一文知所有类型. Java的 ...

  2. 如何自定义TFS中工作项的字段20141010

    如何自定义TFS中工作项的字段 我们以VS2013为例,TFS也是2013版本的: 1. 安装小插件 需要安装Visual Studio Team Foundation Server 2013 Pow ...

  3. css实现加载中的效果

    那天闲着,学习了一下样式效果,自己实现了一个简单的加载中的效果 废话不多说,开始吧!! 一.实现一个圆环       要实现圆环,首先我们需要知道盒模型里面border的本质,先来看一个效果吧 从上面 ...

  4. python常用模块之configparser模块

    python常用模块之configparser 作用:解析配置文件 假设在当前目录下有这样一个conf.ini文件 [DEFAULT] ServerAliveInterval = 45 Compres ...

  5. How to Change the Size of a Box-Plot Label in MATLAB

    Type "load carsmall" to load a sample data set included with MATLAB. Type "boxplot(Ho ...

  6. 基于 od 窗口的anti

    虽然 odadvance 这类的插件 , 使用驱动将 od 的窗口 进行 隐藏,使用enumwindow ,无法枚举到od的窗口, 但是依然可以 使用r3 的方法 , 对od 窗口检测 之后可以使用 ...

  7. Java 输出文件通过 BufferedWriter.newline() 方法换行

    最近项目中需要导出文件,其实导出文件是一个挺简单的事情.但是却遇到了很奇怪的问题. 首先导出到文件需要用到 BufferedWriter.而换行则是通过 bw.newline() 方法,问题将出在 n ...

  8. You're Given a String...

    You're given a string of lower-case Latin letters. Your task is to find the length of its longest su ...

  9. 人人都要培养AIQ

    在人工智能时代,要培养自己的AIQ,其中的关键还是区分事实.观点和推理,在平时的工作生活中关注AI的发展,了解AI的优缺点,尝试用AI的优势让自己工作和生活的更好. 如果说IQ是用来测量一个人的智商, ...

  10. Errors running builder 'DeploymentBuilder' on project ' 解决方法

    此问题一般发生在Myeclipse 保存文件并自动部署时候. Errors occurred during the build. Errors running builder 'DeploymentB ...