canvas-移動(dòng)和旋轉(zhuǎn)

ranslate移動(dòng)變形

translate()移動(dòng)畫布, rotate()旋轉(zhuǎn)畫布。

canvas中不能只移動(dòng)某一個(gè)對(duì)象, 移動(dòng)的都是整個(gè)畫布。

canvas中不能只旋轉(zhuǎn)某一個(gè)對(duì)象, 旋轉(zhuǎn)的都是整個(gè)畫布。

但是可以用save()、restore()來(lái)巧妙設(shè)置, 實(shí)現(xiàn)讓某一個(gè)元素進(jìn)行移動(dòng)和旋轉(zhuǎn)。

移動(dòng)變形、移動(dòng)的是整個(gè)畫布、而不是某個(gè)元素, 在ctx.translate()之后繪制的語(yǔ)句都將被影響。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.translate(100, 100); //將畫布坐標(biāo)系移動(dòng)，坐標(biāo)系就發(fā)生變化了
ctx.fillRect(0, 0, 100, 100); //相對(duì)于移動(dòng)后的坐標(biāo)系開始畫畫
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.translate(100, 100); //將畫布坐標(biāo)系移動(dòng)，坐標(biāo)系就發(fā)生變化了
ctx.fillRect(0, 0, 100, 100); //相對(duì)于移動(dòng)后的坐標(biāo)系開始畫畫
ctx.beginPath();
ctx.arc(100, 100, 100,0 , 6.28, false);
ctx.fillStyle="skyblue";
ctx.fill();
</script>
</html>

save()保存和restore()恢復(fù)

ctx.save()表示保存上下文的物理性質(zhì), ctx.restore()表示恢復(fù)最近一次的保存。

save表示保存sava函數(shù)之前的狀態(tài), restore表示獲取save保存的狀態(tài)。

移動(dòng)了的元素, 會(huì)影響不需要移動(dòng)圓點(diǎn)坐標(biāo)的元素, 所以可以使用以上兩個(gè)方法保存起來(lái), 可以解決讓某一個(gè)元素移動(dòng)變形不受影響。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.save();
ctx.translate(100, 100); //將畫布坐標(biāo)系移動(dòng)，坐標(biāo)系就發(fā)生變化了
ctx.fillRect(0, 0, 100, 100); //相對(duì)于移動(dòng)后的坐標(biāo)系開始畫畫
ctx.restore()
ctx.beginPath();
ctx.arc(100, 100, 100, 0 , 6.28, false);
ctx.fillStyle="skyblue";
ctx.fill();
</script>
</html>

rotate()旋轉(zhuǎn)變形

旋轉(zhuǎn)的是整個(gè)坐標(biāo)系, 坐標(biāo)系以0,0點(diǎn)為中心點(diǎn)進(jìn)行旋轉(zhuǎn)。

rotate(1)的參數(shù), 是弧度, 旋轉(zhuǎn)的也不是矩形, 而是畫布。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext("2d");
ctx.save();
ctx.translate(150,150)
ctx.rotate(1); //1表示57.3度（1弧度）
ctx.fillRect(-50, -50, 100, 100); //相對(duì)于移動(dòng)后的坐標(biāo)系開始旋轉(zhuǎn)
ctx.restore()
</script>
</html>

旋轉(zhuǎn)動(dòng)畫

轉(zhuǎn)木馬

前言

有些小伙伴0基礎(chǔ)小伙伴擔(dān)心，我沒有編程工具怎么辦？
這個(gè)不需要編程工具的，只需要找9張圖片改改名稱就行

步驟

(1) 新建一個(gè)文件夾

(2) 文件夾中新建img文件夾以及一個(gè)txt文檔

(3) 把我放在下面的代碼粘貼到txt文檔中

（4）沒有txt后綴的這樣設(shè)置一下（這里以win11為例，點(diǎn)擊查看-->顯示-->文件擴(kuò)展名）

（5）把文本文檔名稱改為旋轉(zhuǎn)木馬.html

（6）把圖片放在img文件夾里面，需要9張

（7）圖片重命名為 1.jpg 2.jpg 3.jpg 以此規(guī)律命名（200 x 300 像素的圖片）

（8）設(shè)置圖片像素（用win自帶照片軟件打開-->點(diǎn)擊... --> 重設(shè)大小-->自定義尺寸-->把寬度改成200、高度改成200-->保存）

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            /* border: 1px solid black; */
            margin: 50px auto;
            position: relative;
            /* 設(shè)置3D 效果 */
            transform-style: preserve-3d;
            /* 添加3D視距  透視效果 */
            /* perspective: 300px; */
            transform: rotateX(-15deg);
            /* CSS animation動(dòng)畫屬性 
                name 定義動(dòng)畫名稱
                duration 定義動(dòng)畫執(zhí)行時(shí)間   秒/單位
                timing-function 定義動(dòng)畫執(zhí)行速度 linear 勻速
                delay 定義動(dòng)畫執(zhí)行等待 秒/單位
                iteration-count 定義動(dòng)畫執(zhí)行次數(shù) 默認(rèn)為1  無(wú)限執(zhí)行 infinite
                animation-play-state 動(dòng)畫運(yùn)行狀態(tài)控制 默認(rèn)running運(yùn)行  paused 暫停
            */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 10s linear infinite;
        }
        /* 定義關(guān)鍵幀動(dòng)畫  執(zhí)行我們定義的動(dòng)畫 */
        @keyframes move{
            0%{
                /* 在CSS3 變幻屬性中  如果要給一個(gè)元素添加多個(gè)變幻屬性
                    需要將所有的變幻屬性都寫在transform
                 */
                transform:rotateX(-15deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(-15deg) rotateY(360deg);
            }
        }
        /* :hover 偽類選擇器  設(shè)置用戶鼠標(biāo)移入時(shí)的效果 */
        .box:hover{
            /* 當(dāng)用戶鼠標(biāo)移入時(shí) 動(dòng)畫由默認(rèn)的運(yùn)行狀態(tài)變成暫停 */
            animation-play-state: paused;
        }
        .box div{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
            margin-top: 50px;
        }
        /* :nth-child(1) */
        .box div:nth-child(1){
            /* 改變頁(yè)面第一張圖片 變幻屬性
            transform  變幻屬性
            rotate  旋轉(zhuǎn)
            translate 位移
             */
            transform: rotateY(40deg) translateZ(275px);
        }
        .box div:nth-child(2){
            transform: rotateY(80deg) translateZ(275px);
        }
        .box div:nth-child(3){
            transform: rotateY(120deg) translateZ(275px);
        }
        .box div:nth-child(4){
            transform: rotateY(160deg) translateZ(275px);
        }
        .box div:nth-child(5){
            transform: rotateY(200deg) translateZ(275px);
        }
        .box div:nth-child(6){
            transform: rotateY(240deg) translateZ(275px);
        }
        .box div:nth-child(7){
            transform: rotateY(280deg) translateZ(275px);
        }
        .box div:nth-child(8){
            transform: rotateY(320deg) translateZ(275px);
        }
        .box div:nth-child(9){
            transform: rotateY(360deg) translateZ(275px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="./img/1.jpg" alt="">
        </div>
        <div>
            <img src="./img/2.jpg" alt="">
        </div>
        <div>
            <img src="./img/3.jpg" alt="">
        </div>
        <div>
            <img src="./img/4.jpg" alt="">
        </div>
        <div>
            <img src="./img/5.jpg" alt="">
        </div>
        <div>
            <img src="./img/6.jpg" alt="">
        </div>
        <div>
            <img src="./img/7.jpg" alt="">
        </div>
        <div>
            <img src="./img/8.jpg" alt="">
        </div>
        <div>
            <img src="./img/9.jpg" alt="">
        </div>
    </div>
</body>
</html>

上一篇：ABB機(jī)器人Sockets通訊

天跟大家分享一個(gè)很很酷6的一個(gè)網(wǎng)站前端小技術(shù)，

打開網(wǎng)頁(yè)編輯軟件，新建一個(gè)HTML網(wǎng)頁(yè)，然后在body里寫下如圖代碼

然后添加css3樣式代碼如圖

添加好后點(diǎn)擊鍵盤上的ctrl+s保存，保存路徑隨意

歡迎大家轉(zhuǎn)載收藏，有需要源碼的朋友可以關(guān)注我后私聊我，還可以加咱們的交流群：309073798

最后有不好的地方歡迎在留言區(qū)吐槽

在線咨詢

上一篇：不用到處找，好用的中職教學(xué)資料在這里
下一篇：JavaScript與PHP到底有何不同？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

canvas-移動(dòng)和旋轉(zhuǎn)

前言

步驟

代碼

您的項(xiàng)目需求