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)使用 ...

随机推荐

类型和原生函数及类型转换（三：终结js类型转换）
Number() parseInt() parseFloat() Boolean() String() toString() 一.显式类型转换 -------Number()函数把对象的值转换为数字. ...
Correction suggestions
1. title: A remark on the global existence of weak solutions to the compressible quantum Navier-Stok ...
[物理学与PDEs]第1章第2节预备知识 2.2 Ampere-Biot-Savart 定律, 静磁场的散度与旋度
1. 电流密度, 电荷守恒定律 (1) 电荷的定向移动形成电流. (2) 电流密度 ${\bf j}$, 是描述导体内一点在某一时刻电流流动情况的物理量, 用单位时间内通过垂直于电流方向的单位面积的电 ...
jQuery UI弹出新窗体
借助jqueryUI 的Dialog 在隐藏的div中嵌入Iframe 改变iframe的路径如果项目经常用到弹出新窗体,则利用模板,把此代码和html 放入父页面中,实现父级调用, <in ...
报文段、协议、MAC地址
Leetcode#13. Roman to Integer（罗马数字转整数）
题目描述罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即 ...
python中取整数的几种方法
1.向下取整: int() >>> a = 14.38 >>> int(a) 2.向上取整:ceil() 使用ceil()方法时需要导入math模块,例如 > ...
51nod--1079 中国剩余定理
题目: 1079 中国剩余定理基准时间限制:1 秒空间限制:131072 KB 分值: 0 难度:基础题收藏关注一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K ...
Python-form表单标签
语义:标记表单 #1.什么是表单? 表单就是专门用来接收用户输入或采集用户信息的 #2.表单的格式 <form> <表单元素> </form> 链接:https:/ ...
【sklearn】中文文档
看不见的叫做远方飞机票分类回归聚类降维模型选择预处理

HTML5_canvas_pen.translate()_

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

随机推荐

热门专题