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

随机推荐

CMDB服务器管理系统【s5day90】：API构造可插拔式插件逻辑
1.服务器端目录结构: 1.__init__.py from django.conf import settings from repository import models import impo ...
SQL修改日期类型字段为字符串类型
select * from test1 --添加行 ) --将转换格式后的数据放到列中 ) --删除老的字段 alter table test1 drop column startdate --修改字 ...
Beamer 跳到另外一页
\documentclass[english]{beamer}\usepackage{babel} \begin{document} \begin{frame}\frametitle{the refe ...
[物理学与PDEs]第1章第5节 Maxwell 方程组的数学结构, 电磁场的波动性 5.3 电磁场的波动性, 自由电磁波
1. 由 Maxwell 方程组易知 $$\beex \bea \cfrac{1}{c^2}\cfrac{\p^2{\bf E} }{\p t^2}-\lap{\bf E} &=-\sex{ ...
爬取qq音乐巅峰榜---内地音乐的榜单
import requestsimport jsonimport sys for i in range(0,10): url = "https://szc.y.qq.com/v8/fcg-b ...
HEAD FILE
心血来潮做的沙雕Head,喜欢就拿去用吧,Explosion! HEAD //#pragma comment(linker, "/STACK:1024000000,1024000000&qu ...
Vue技术内幕出去看看吧实例化+挂载
实例化时挂载DOM 从 Vue.prototype.$mount 挂载函数开始有 template配置项时生成 render函数
【easy】206. Reverse Linked List 链表反转
链表反转,一发成功~ /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; ...
Fiddler模拟自动响应数据
Fiddler模拟自动响应数据定位到要修改的部分 2.将返回的数据保存到本地,保存成网页,并修改响应数据找到修改的部分,修改之 3.再次请求刷新首页,将工具定位到autoresponder将接口加 ...
JVM虚拟机
一.JAVA虚拟机内存模型: 1.程序计数器:非常小的内存,用于存放下一条运行的指令: 每一个线程都必须有一个独立的程序计数器,用于记录下一条要运行的指令,是一块线程私有的内存空间,CPU时间切片 2 ...

HTML5_canvas_pen.translate()_

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

随机推荐

热门专题