HTML5-用canvas画布rotate字体旋转（中国象棋棋谱）。

一开始我们老师安排我做这个作业，在这个作业我遇到了一个很重大的问题就是，文字旋转这么旋转，我查了很多资料。

　　1发现绘画正方形，使他正方形中心原点旋转非常容易理解。（我相信这个很多人看一下都会懂,）

　　　　　　　　　　1.translate(x,y):平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）.
　　　　　　　　　　　　例子：画布原点假如落在（1，1），那么translate（10，10）就是在原点（1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。

　　　　　　　　　　2.我来说说怎么转移到中心点，假如，fillRect(50,50,100,100)的正方形（矩形也是一样的），坐标在（50，50）建立了一个长，宽各100的正方形，但是呢正方形的中点究竟在那里呢，公式是：cvContent.translate(x+width/2,y+height/2);就能找到中心点了，也就是说cvContent.translate(125,125)才是正方行的中心点，如图下，找到中心点后直接旋转就行了。

　　　　注意了：正方形之所以能旋转，有一下这两个

　　　　　　cvContext.translate(); 　　//

　　　　　　cvContext.rotate(45 * Math.PI/180)　　//转成角度的度数，，只要改*前面的数值便可以旋转。

问题来了：文字旋转究竟怎么样？

琢磨了很久，其实很简单，只是我们的理解方法用错了，导致本来简简单单的文字旋转，拖我们那么多的时间。

我以中国象棋的棋谱图为案例，中间一行不是文字吗。

代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #canvas1{

                font-family: arial;

            }

        </style>

    </head>

    <body>

       　<h3>canvas画布：首先先设置一块区域，可以绘制文字或图形</h3>

        <div style="border: 1px solid red; width:400px;height: 450px;">

        <canvas id="huabu3" width="400px" height="450px" ></canvas>

        </div>

        <script type="text/javascript">

            //找到画布的元素

            var chiness = document.getElementById("huabu3");

            //设置2维绘画的上下文

            var chess = chiness.getContext("2d");

            //绘画直线的上下文

            var zhixian = chiness.getContext("2d");

            //设置汉字的绘画上下文，因为如果跟chess混在一起显示不了文字

            var hanzi = chiness.getContext("2d");

            chess.strokeStyle = "greenyellow";

            zhixian.strokeStyle ="greenyellow";

            //先画第一行的

            chess.strokeRect(0,0,400,50);

            chess.strokeRect(50,0,50,50);

            chess.strokeRect(100,0,50,50);

            chess.strokeRect(150,0,50,50);

            chess.strokeRect(200,0,50,50);

            chess.strokeRect(250,0,50,50);

            chess.strokeRect(300,0,50,50);

            chess.strokeRect(350,0,50,50);

            //第二行的

            chess.strokeRect(0,50,50,50);

            chess.strokeRect(50,50,50,50);

            chess.strokeRect(100,50,50,50);

            chess.strokeRect(150,50,50,50);

            chess.strokeRect(200,50,50,50);

            chess.strokeRect(250,50,50,50);

            chess.strokeRect(300,50,50,50);

            chess.strokeRect(350,50,50,50);

            //第三行

            chess.strokeRect(0,100,50,50);

            chess.strokeRect(50,100,50,50);

            chess.strokeRect(100,100,50,50);

            chess.strokeRect(150,100,50,50);

            chess.strokeRect(200,100,50,50);

            chess.strokeRect(250,100,50,50);

            chess.strokeRect(300,100,50,50);

            chess.strokeRect(350,100,50,50);

            //第四行

            chess.strokeRect(0,150,50,50);

            chess.strokeRect(50,150,50,50);

            chess.strokeRect(100,150,50,50);

            chess.strokeRect(150,150,50,50);

            chess.strokeRect(200,150,50,50);

            chess.strokeRect(250,150,50,50);

            chess.strokeRect(300,150,50,50);

            chess.strokeRect(350,150,50,50);

            //第六行

            chess.strokeRect(0,250,50,50);

            chess.strokeRect(50,250,50,50);

            chess.strokeRect(100,250,50,50);

            chess.strokeRect(150,250,50,50);

            chess.strokeRect(200,250,50,50);

            chess.strokeRect(250,250,50,50);

            chess.strokeRect(300,250,50,50);

            chess.strokeRect(350,250,50,50);

            //第7行

            chess.strokeRect(0,300,50,50);

            chess.strokeRect(50,300,50,50);

            chess.strokeRect(100,300,50,50);

            chess.strokeRect(150,300,50,50);

            chess.strokeRect(200,300,50,50);

            chess.strokeRect(250,300,50,50);

            chess.strokeRect(300,300,50,50);

            chess.strokeRect(350,300,50,50);

            //第8行

            chess.strokeRect(0,350,50,50);

            chess.strokeRect(50,350,50,50);

            chess.strokeRect(100,350,50,50);

            chess.strokeRect(150,350,50,50);

            chess.strokeRect(200,350,50,50);

            chess.strokeRect(250,350,50,50);

            chess.strokeRect(300,350,50,50);

            chess.strokeRect(350,350,50,50);

            //第9行

            chess.strokeRect(0,400,50,50);

            chess.strokeRect(50,400,50,50);

            chess.strokeRect(100,400,50,50);

            chess.strokeRect(150,400,50,50);

            chess.strokeRect(200,400,50,50);

            chess.strokeRect(250,400,50,50);

            chess.strokeRect(300,400,50,50);

            chess.strokeRect(350,400,50,50);

            //这是线条布局，我觉得分开写好一点，不会乱

            zhixian.moveTo(150,0);

            zhixian.lineTo(250,100);

            zhixian.stroke();

            zhixian.moveTo(250,0);

            zhixian.lineTo(150,100);

            zhixian.stroke();

            zhixian.moveTo(150,450);

            zhixian.lineTo(250,350);

            zhixian.stroke();

            zhixian.moveTo(250,450);

            zhixian.lineTo(150,350);

            zhixian.stroke();

            //十字架线条的布局(由于做这个十字甲，根据坐标就可以简简单单的做出来了，没什么技巧性，所我做了一组。)

            zhixian.moveTo(45,75);

            zhixian.lineTo(45,95);

            zhixian.lineTo(25,95);

            zhixian.stroke();

            zhixian.moveTo(55,75);

            zhixian.lineTo(55,95);

            zhixian.lineTo(75,95);

            zhixian.stroke();

            zhixian.moveTo(25,105);

            zhixian.lineTo(45,105);

            zhixian.lineTo(45,125);

            zhixian.stroke();

            zhixian.moveTo(55,125);

            zhixian.lineTo(55,105);

            zhixian.lineTo(75,105);

            zhixian.stroke();

            //第五行，，文字那行那里我最后才写，，因为如果我把文字，插入到中间的行数来写，会发现下面的格子都不见了。

            //建议创建文字的时候，先不急切的移动到自己想要的位置，

            //文字的真实点是在字体的左下面 {.汉}，你可以

            hanzi.font = '25px sans-serif';//字体大小也会影响的哦。

            hanzi.fillStyle = "red";

            hanzi.translate(60,235);//其实这步是这重要的，定好中心点好，旋转起来就剪刀了

            hanzi.rotate( 270* Math.PI/180);//我这步最后操作，等你中心点定好，移动到你自己想要的位置，再调角度

            hanzi.fillText('汉',0,0);

            hanzi.fillText('界',0,100);

            hanzi.rotate( 180* Math.PI/180);

            hanzi.fillText('楚',-25,-280);

            hanzi.fillText('河',-25,-180);

            hanzi.restore();

            //如还是 不懂的话，，可以复制我的代码，，自己改一下里面的数据，最好几十几十改，就会明白其中的道理。

        </script>

    </body>

</html>

HTML5-用canvas画布rotate字体旋转（中国象棋棋谱）。的更多相关文章

用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
HTML5之Canvas画布
先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...
【HTML5】canvas画布练习
第一步:获取画布元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getConte ...
canvas绘画基础(一)：认识canvas画布
html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...
自学HTML5第四节（canvas画布详解）
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局,画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 :实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能完整的项目源码已经开源 ...
canvas画布标签
最近良师益友整理一些canvas的资料,加强学习了解! 当你创建一个<canvas>元素后,就拥有了它的绘图上下文. 一.简单图形 1.getContext()方法为了在canvas上绘 ...
Canvas 画布 H5
前言: canvas 元素用于在网页上绘制图形. canvas 本身是一个标签,<canvas>标签定义图形,必须使用脚本来绘制图形,比如在画布上(Canvas)画一个红色矩形,渐变矩形, ...

随机推荐

spring boot @Scheduled未生效原因以及相关坑、及相对其他定时任务架构的优势
在spring boot中,支持多种定时执行模式(cron, fixRate, fixDelay),在Application或者其他Autoconfig上增加@EnableScheduling注解开启 ...
spring List,Set,Map,Properties,array的配置文件注入方式
虽然不多,但是有时候在实现的时候,我们还是希望某些参数或者属性通过集合()的方式注入进来,比如配置表参数列表,addresslist,亦或是三方库等等.因为这种改动不是很多,经常一时想不起来,今天做个 ...
CS224n学习笔记(一)
How do we have usable meaning in a computer? Represents the words as discrete symbols, (离散型变量) Use t ...
字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件引入字体图标库 <link rel="styleshe ...
启动maven的web项目
一.可以通过在pom中配置tomcat插件. 首先要确保你的仓库里有这个插件,然后按如下配置. <build> <plugins> <!-- 配置Tomcat插件 --& ...
hihoCoder week7 完全背包
完全背包题目链接 https://hihocoder.com/contest/hiho7/problem/1 #include <bits/stdc++.h> using namespa ...
p3168 [CQOI2015]任务查询系统（差分+主席树）
恕我才学浅薄,一开始想到的是树状数组+线段树,然后看了题解才第一次见到了差分这种神奇的科技仔细想想,主席树的本质不就是前缀和嘛,加上一个差分也是可以的,没想到真是罪过罪过对时间维护一个差分在Si ...
深度学习课程笔记（十七）Meta-learning (Model Agnostic Meta Learning)
深度学习课程笔记(十七)Meta-learning (Model Agnostic Meta Learning) 2018-08-09 12:21:33 The video tutorial can ...
ES6模块化操作
在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作.模块化操作主要包括两个方面. export :负责进行模块化,也是模块的输出. im ...
常用linux,DOS命令——持续更新
cd 文件夹名进入某个文件夹 cd ../ 退出该级目录进入上一级 cd ../../ 退出该级目录进入上上级 cd ../../demo 退出该级目录进入上上级的目录 d: 回车进入d盘 ls ...

HTML5-用canvas画布rotate字体旋转（中国象棋棋谱）。

HTML5-用canvas画布rotate字体旋转（中国象棋棋谱）。的更多相关文章

随机推荐

热门专题