HTML5_canvas_pen.translate()_

時間 2019-11-08

標籤 html5 html canvas pen.translate pen translate 欄目 HTML5 简体版

原文原文鏈接

.save() 和 .restore() javascript

除了會保存以前的樣式，還會保存以前的座標軸

pen.translate(x, y);css

將畫布的座標軸原點(0, 0) 從畫布的左上角，移動到 (x, y)html

必須再繪製以前，移動座標軸
改變畫布座標軸以前的繪製，不受影響。

pen.scale(x, y);java

x 設置水平方向上縮放倍數canvas

y 設置垂直方向上縮放倍數瀏覽器

參照畫布繪製座標軸原點(0, 0)

pen.rotate(radian);flex

radian 弧度 = deg*Math.PI/180spa

參照畫布的繪製座標軸原點 (0, 0) radian 增大順時針旋轉座標軸
本次旋轉，會參照此刻座標軸的角度，累加旋轉，

旋轉案例rest

<!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>

鐘錶案例code

<!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>

更多相關文章...

相關標籤/搜索

HTML

HTML5

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。