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

随机推荐

2.9 while循环
while循环 <1>while循环的格式 while 条件: 条件满足时,做的事情1 条件满足时,做的事情2 条件满足时,做的事情3 ...(省略)... demo i = 0 whil ...
一、Kubernetes系列之介绍篇
•Kubernetes介绍 1.背景介绍云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什 ...
HTTP中application/x-www-form-urlencoded字符说明
一.概述在学习ajax的时候,如果用post请求,需要设置如下代码. ajax.setRequestHeader("content-type","application ...
git 20181119
不同分支间(a.b分支)合并部分文件 git ck b git ck a f1 f2 git配置配置文件系统git config --system --list 全局git config --gl ...
MySql的事务控制（TCL语言）
⒈事务一个或一组sql语句组成一个执行单元,这个执行单元要么全部执行,要么全部不执行. ⒉事务的特性(ACID) 1.原子性(Atomicity):一个事务不可再分割,要么都执行要么都不执行. 2. ...
linux服务器安装Mysql后，只能看到information_schema/test这两个库，无法修改密码
参考链接:https://www.cnblogs.com/ThinkVenus/p/7670722.html 问题背景:登录mysql失败,密码错误,由此想到需要更改密码然而,进入数据库后,只能看到 ...
ios9 safari currentTime audio bug
var audio = document.createElement('audio') audio.src = 'https://ic-static.vipkidteachers.com/course ...
jquery 查找子窗口
$("#订单信息").contents().find('div.datagrid-body').hide();$("#订单信息").contents().fin ...
微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接由于项目需 ...
论文阅读笔记四十：Deformable ConvNets v2: More Deformable, Better Results（CVPR2018）
论文源址:https://arxiv.org/abs/1811.11168 摘要可变形卷积的一个亮点是对于不同几何变化的物体具有适应性.但也存在一些问题,虽然相比传统的卷积网络,其神经网络的空间形状 ...

HTML5_canvas_pen.translate()_

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

随机推荐

热门专题