canvas旋转文本

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>

原文地址:https://www.cnblogs.com/ye-hcj/p/10356397.html

时间: 2024-10-29 00:33:52

canvas旋转文本的相关文章

HTML新特性--canvas绘图-文本

一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文本基线为准) -ctx.fillText(str,x,y);       绘制填充文字(实心) -ctx.font="19px SimHei";  前面文本大小/字体 -ctx.textBaseline = "top";  调整文本基线[top/alphabetic/b

canvas旋转

canvas旋转的两种方法: 1.先用translate()将(0,0)坐标移动到想要旋转的中心点,再用rotate()旋转,最后要用translate()将中心移回(0,0)点. 2.将要旋转的内容放在save()方法和restore()方法之间(类似于将两个方法里的绘制放在新的画布里),此方法也要用translate()方法移动(0,0)点,再用rotate()方法. 注意: 1.rotate()方法要放在绘制图形之前. 2.要先用translate()再用rotate(). 3.第一种方法

html5 canvas旋转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

利用OpenCV实现旋转文本图像矫正的原理及OpenCV代码

对图像进行旋转矫正,关键是要获取旋转角度是多少!获取了旋转角度就可以用仿射变换对图像进行矫正,图像旋转的代码可以参考我的博文http://blog.csdn.net/wenhao_ir/article/details/51469085 旋转角度怎么获取?可以对图像作傅里叶变换获取这个角度,具体怎么求,请听我慢慢道来! 文本图像的明显特征就是存在分行间隔,那么行与文字之间这个灰度值变化就不如真正的文字及文字间的变化剧烈,那么相应的这些地方的频谱值也低,即频谱的低谱部分,因为傅里叶变换就是表征图像各

canvas绘制文本

##在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框 ctx.fillText("填充指定的文本",10,100); ctx.strokeText("绘制文本边框",10,150); <!DOCTYPE html> <html> <head> <m

[ html canvas 绘制文本 ] canvas绘图实现绘制文本 strokeText fillText方法及textAlign textBaseline font 属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[ html canvas 旋转 缩放 平移 ] canvas绘图实现旋转复制实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

Visio中旋转文本框与箭头平行

如图想要让文本框和箭头平行,按住shift,可以画出水平或者垂直的线,线是斜的,用文本框来标识,要框和线平行,那可以这样做: 打开视图  -  任务窗格 - 大小和位置,然后先单击选中斜线 左下角倒数第二行这里有个角度,复制下来,再单击文本框,将这个角度值粘贴到左下角即可,但是这种方法有时候恰好位置相反,由于不了解Visio中角度的设置,所以,加减180度也不行,我最后用的是如图中框住的部分,直接旋转.

Canvas旋转图片--保持大小不变的算法

 function drawImg(angle) { canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) * Math.sin(angle * Math.PI / 180 / 2) * 2; var degree = 180 - 45 - (180 - angle) / 2; var x = distance * Math.sin(degree * Math.PI / 180); var y = distanc