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

随机推荐

HDU 5965(三行扫雷 dp)
题意是在一个 3 行 n 列的图上进行扫雷,中间一行没有雷,且中间一行的每一格都会显示周围的雷数,问根据已知的雷数在上下两行设置地雷的方法数. 分析知每一列所填雷数的和与周围的雷数有关,但每列具体的填 ...
第一节：框架前期准备篇之Log4Net日志详解
一. Log4Net简介 Log4net是从Java中的Log4j迁移过来的一个.Net版的开源日志框架,它的功能很强大,可以将日志分为不同的等级,以不同的格式输出到不同的存储介质中,比如:数据库.t ...
[Android] Android 锁屏实现与总结（二）
上接: [Android] Android 锁屏实现与总结 (一) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 ...
div的默认position值是静态的static
div的默认position值是静态的static,如果相对父元素使用Position:absolute的话,需要手动在父元素上添加Position.
设计模式九: 观察者模式(Observer Pattern)
简介观察者属于行为型模式的一种, 又叫发布-订阅模式. 如果一个对象的状态发生改变,依赖他的对象都将发生变化, 那么这种情况就适合使用观察者模式. 它包含两个术语,主题(Subject),观察者(O ...
Charles 抓包的简单使用
1.准备工具: 软件 Charles 手机随意哪个现代手机 2.基本配置安装Charles的电脑和手机在同一个局域网下, 点击手机上的和电脑练得同一个局域网的名字进行配置,里面有个代理,选择手动, ...
python的一些基本概念
1.为什么python被称为胶水语言?他是新一代的系统脚本参考博客:https://www.cnblogs.com/ningskyer/articles/5264172.html 2.python百度 ...
postgresql9.1数据库加解密
--如下为postgresql9.1数据库加解密模块配置 --设置schemapsql -U postgres -h localhostset schema 'sbdc';--生成日志\o E:/sh ...
python学习记录20181207
1.python中函数指针的用法直接把函数名赋值给变量,不需要加上()和形参如: def add(num1,num2): return num1+num2 fun = add 2.打印输出列表需要 ...
jquery 第一章
1.本章目标了解jquery 了解jquery和js的区别掌握jquery的入门掌握jquery对象和dom对象的区别2.jquery简介 jquery是一个轻量级 ...

HTML5_canvas_pen.translate()_

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

随机推荐

热门专题