HTML5_canvas_pen.translate()

.save() 和 .restore()

除了会保存之前的样式，还会保存之前的坐标轴

pen.translate(x, y);

将画布的坐标轴原点(0, 0) 从画布的左上角，移动到 (x, y)

必须再绘制之前，移动坐标轴
改变画布坐标轴之前的绘制，不受影响。

pen.scale(x, y);

x 设置水平方向上缩放倍数

y 设置垂直方向上缩放倍数

参照画布绘制坐标轴原点(0, 0)

pen.rotate(radian);

radian 弧度 = deg*Math.PI/180

参照画布的绘制坐标轴原点 (0, 0) radian 增大顺时针旋转坐标轴
本次旋转，会参照此刻坐标轴的角度，累加旋转，

旋转案例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>旋转</title>

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

            }

            #wrap {

            /*

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

            */

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <canvas id="my_canvas" width="600" height="600">

                您的浏览器不支持 canvas，建议更新或者更换浏览器。

            </canvas>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 1. 获取画板

            var myCanvas = document.getElementById("my_canvas");

            // 给画布一个颜色

            myCanvas.style.backgroundColor = "#eee";

            // 2. 获取画笔

            var pen = myCanvas.getContext("2d");

            // 3. 一定要在绘制之前 设置好

            pen.fillStyle = 'olive';    // 填充的颜色

            pen.strokeStyle = "blue";    //  笔的颜色

            pen.lineWidth = 4;    // 笔宽

            pen.lineCap = "round";    // 圆形结束

            pen.lineJoin = "round";    // 圆角

            var radian = 0;

            var chgScale = 1;

            var val = -0.1;

            window.setInterval(function(){

                chgScale += val;

                if(chgScale < 0 ){

                    val = 0.1;

                    chgScale = 0+0.1;

                }

                if(chgScale > 2){

                    val = -0.1;

                    chgScale = 2-0.1;

                }

                pen.restore();

                // 4.开始绘制

                pen.clearRect(0, 0, myCanvas.width, myCanvas.height);

                pen.beginPath();

                pen.save();

                pen.translate(200, 200);

                pen.scale(chgScale, chgScale);

                pen.rotate(radian*Math.PI/180);

                pen.arc(0, 0, 100, 0, 2*Math.PI);

                pen.rect(0, 0, 100, 100);

                pen.stroke();

                radian += 4.5;

            }, 1000);

        </script>

    </body>

</html>

钟表案例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>DIY Clock</title>

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

            }

            #wrap {

                padding-left: 160px;

                padding-top: 160px;

                /*

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

                */

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <canvas id="my_canvas" width="600" height="600">

                您的浏览器不支持 canvas，建议更新或者更换浏览器。

            </canvas>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 1. 获取画板

            var myCanvas = document.getElementById("my_canvas");

            // 给画布一个颜色

            myCanvas.style.backgroundColor = "#eee";

            // 2. 获取画笔

            var pen = myCanvas.getContext("2d");

            // 3. 一定要在绘制之前 设置好

            pen.fillStyle = '#D40000';    // 填充的颜色

            pen.strokeStyle = "#000";    //  笔的颜色

            pen.lineWidth = 4;    // 笔宽

            pen.lineCap = "round";    // 圆形结束

            pen.lineJoin = "round";    // 圆角

            window.setInterval(diyClock, 1000);

            // 封装 diy 时钟

            function diyClock(){

                pen.clearRect(0, 0, myCanvas.width, myCanvas.height);

                pen.save();

                    pen.translate(300, 300);

                    //将整个画布逆时针旋转90度

                    pen.rotate(-90*Math.PI/180);

                    pen.scale(0.5, 0.5);

                    // 表盘    圆盘颜色:#325FA2    圆盘宽度:14    圆盘半径:140

                    pen.save();

                        pen.strokeStyle = "#325FA2";

                        pen.lineWidth = 14;

                        pen.beginPath();

                        pen.arc(0, 0, 140, 0, 2*Math.PI);

                        pen.stroke();

                    pen.restore();

                    // 分刻    宽度为4    长度为3    外层空心圆盘与分刻之间的距离也为20

                    pen.save();

                        var i = 0;

                        for(i=0; i<60; i++){

                            if(i%5 != 0){

                                pen.beginPath();

                                pen.moveTo(0, -120);

                                pen.lineTo(0,-117);

                                pen.stroke();

                            };

                            pen.rotate(6*Math.PI/180);

                        };

                    pen.restore();

                    // 时刻    宽度为8    长度为20    外层空心圆盘与时刻之间的距离也为20

                    pen.save();

                        pen.lineWidth = 8;

                        for(i=0; i<12; i++){

                            pen.beginPath();

                            pen.moveTo(0, -120);

                            pen.lineTo(0, -100);

                            pen.stroke();

                            pen.rotate(30*Math.PI/180);

                        };

                    pen.restore();

                    var curTime = new Date();

                    var seconds = curTime.getSeconds();

                    var minutes = curTime.getMinutes()+seconds/60;

                    var hours = curTime.getHours()+minutes/60;

                    // 时针    宽度为14     圆心外溢出80 收20

                    pen.save();

                        pen.rotate(30*hours*Math.PI/180);

                        pen.lineWidth = 14;

                        pen.beginPath();

                        pen.moveTo(-20,0);

                        pen.lineTo(80,0);

                        pen.stroke();

                    pen.restore();

                    // 分针    宽度为10    圆心外溢出112 收28

                    pen.save();

                        pen.rotate(6*minutes*Math.PI/180);

                        pen.lineWidth = 10;

                        pen.beginPath();

                        pen.moveTo(-28,0);

                        pen.lineTo(112,0);

                        pen.stroke();

                    pen.restore();

                    // 秒针    颜色:#D40000    宽度为6    圆心外溢出83 收30

                    pen.save();

                        pen.rotate(6*seconds*Math.PI/180);

                        pen.strokeStyle = "#D40000";

                        pen.fillStyle = "#D40000";

                        pen.lineWidth = 6;

                        pen.beginPath();

                        pen.moveTo(-30, 0);

                        pen.lineTo(83, 0);

                        pen.stroke();

                        // 秒针头   96码开外半径为10的空心圆    宽度为6

                        pen.beginPath();

                        pen.arc(96, 0, 10, 0, 2*Math.PI);

                        pen.stroke();

                        // 表芯半径为10的实心圆

                        pen.beginPath();

                        pen.arc(0, 0, 10, 0, 2*Math.PI);

                        pen.fill();

                    pen.restore();

                pen.restore();

            };

        </script>

    </body>

</html>

HTML5_canvas_pen.translate()_的更多相关文章

VSTO学习笔记（十四）Excel数据透视表与PowerPivot
原文:VSTO学习笔记(十四)Excel数据透视表与PowerPivot 近期公司内部在做一种通用查询报表,方便人力资源分析.统计数据.由于之前公司系统中有一个类似的查询使用Excel数据透视表完成的 ...
knowledgeroot 配置
首先下载 KnowledgeRoot 的安装包,就是一个压缩文件,解压缩后放到 WebRoot 下面在浏览器中打开网站,自动提示进行安装,安装的过程很简单,安装结束后即可以使用. 安装包创建的数据库 ...
knowledgeroot
knowledgeroot 示例站点 www.globaladmin.cn Knowledgeroot可用于文档管理,知识库管理. 1.基于php开发,支持linux ,windows.2.支持mys ...
-_-#【Canvas】measureText, translate, drawImage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
python基础-基本数据类型总结_整型(int)_字符型(str)_day3
一.基本数据类型 1.整型(int) ps1:数字 int ,所有的功能,都放在int里a1 = 123a1 = 456 ps2: int 将字符串转换为数字 # -int # 将字符串转换为数字 ...
HTML5_画布_太阳系
HTML5_画布_太阳系一.canvas属性和方法的简单介绍①对于不支持canvas标签的浏览器需要显示"不支持canvas"使用IE11浏览器的开发人员工具,仿真:文档模式=8 ...
translate函数说明
TRANSLATE(expr, from_string, to_string) from_string 与 to_string 以字符为单位,对应字符一一替换. SQL> SELECT TRAN ...
kubernetes 实战6_命令_Share Process Namespace between Containers in a Pod&Translate a Docker Compose File to Kubernetes Resources
Share Process Namespace between Containers in a Pod how to configure process namespace sharing for a ...
python之模块_随手记录的模块
目录 1.StringIO模块 2.string模块 3.pprint模块 4.struct模块 5.uuid模块 6.itertools 7.prettytable 1.StringIO (1)使用 ...

随机推荐

java调用matlab绘图
一注意事项 1: MatLab的版本必须是2006b+(包括2006b或更高版本),因为只有在这些版本中才有MATLAB Builder for Java(也叫Java Builder). 2: 运 ...
Python通过分页对数据进行展示
# 通过分页对数据进行展示 """ 要求: 每页显示10条数据让用户输入要查看的页面:页码 """ USER_LIST = [] for ...
javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
【转载】c++类的实例化与拷贝
https://www.cnblogs.com/chris-cp/p/3578976.html c++的默认拷贝构造函数,从深度拷贝和浅拷贝说起: https://blog.csdn.net/qq_2 ...
Beamer 跳到另外一页
\documentclass[english]{beamer}\usepackage{babel} \begin{document} \begin{frame}\frametitle{the refe ...
使用/dev/poll的str_cli函数
void str_cli(FILE *fp, int sockfd) { int stdineof; char buf[MAXLINE]; int n; int wfd; ]; struct dvpo ...
Codeforces 1101G(线性基)
题目链接题意将序列尽可能分成多段使得任意$x \geq 1$段内的所有元素的异或和大于$0$问最多多少段思路首先,如果所有元素异或和等于$0$答案显然为$-1$,否则构造整个序列的线性基,这个 ...
SSH之Hibernate总结篇
Hibernate hibernate 简介: hibernate是一个开源ORM(Object/Relationship Mipping)框架,它是对象关联关系映射的持久层框架,它对JDBC做了轻量 ...
Nginx中if语句中的判断条件
一.if语句中的判断条件(nginx) 1.正则表达式匹配: ==:等值比较; ~:与指定正则表达式模式匹配时返回“真”,判断匹配与否时区分字符大小写: ~*:与指定正则表达式模式匹配时返回“真”,判 ...
hasOne、hasMany、belongsTo
这里将hasOne.hasMany.belongsTo进行一个详细举例说明. 首先,这3个的大致中文意思: hasOne:有一个,加上主谓语应该是 ,A 有一个 B hasMany:有很多,A 有很多 ...

HTML5_canvas_pen.translate()_

HTML5_canvas_pen.translate()_的更多相关文章

随机推荐

热门专题