Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 99久在线精品99re6视频,国产精品区一区二区免费,亚洲网址在线 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          canvas-移動和旋轉
          
        
           
          
	
	
          
		canvas-移動和旋轉
          
                        
          ranslate移動變形
          translate()移動畫布, rotate()旋轉畫布。
          canvas中不能只移動某一個對象, 移動的都是整個畫布。
          canvas中不能只旋轉某一個對象, 旋轉的都是整個畫布。
          但是可以用save()、restore()來巧妙設置, 實現讓某一個元素進行移動和旋轉。
          移動變形、移動的是整個畫布、而不是某個元素, 在ctx.translate()之后繪制的語句都將被影響。
          <!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); //將畫布坐標系移動，坐標系就發生變化了
ctx.fillRect(0, 0, 100, 100); //相對于移動后的坐標系開始畫畫
</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); //將畫布坐標系移動，坐標系就發生變化了
ctx.fillRect(0, 0, 100, 100); //相對于移動后的坐標系開始畫畫
ctx.beginPath();
ctx.arc(100, 100, 100,0 , 6.28, false);
ctx.fillStyle="skyblue";
ctx.fill();
</script>
</html>
          save()保存和restore()恢復
          ctx.save()表示保存上下文的物理性質, ctx.restore()表示恢復最近一次的保存。
          save表示保存sava函數之前的狀態, restore表示獲取save保存的狀態。
          移動了的元素, 會影響不需要移動圓點坐標的元素, 所以可以使用以上兩個方法保存起來, 可以解決讓某一個元素移動變形不受影響。
          <!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); //將畫布坐標系移動，坐標系就發生變化了
ctx.fillRect(0, 0, 100, 100); //相對于移動后的坐標系開始畫畫
ctx.restore()
ctx.beginPath();
ctx.arc(100, 100, 100, 0 , 6.28, false);
ctx.fillStyle="skyblue";
ctx.fill();
</script>
</html>
          rotate()旋轉變形
          旋轉的是整個坐標系, 坐標系以0,0點為中心點進行旋轉。
          rotate(1)的參數, 是弧度, 旋轉的也不是矩形, 而是畫布。
          <!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); //相對于移動后的坐標系開始旋轉
ctx.restore()
</script>
</html>
          旋轉動畫

          轉木馬
          前言
          有些小伙伴0基礎小伙伴擔心，我沒有編程工具怎么辦？
          這個不需要編程工具的，只需要找9張圖片改改名稱就行
          步驟
          (1) 新建一個文件夾
          (2) 文件夾中新建img文件夾 以及一個txt文檔
          (3) 把我放在下面的代碼粘貼到txt文檔中
          （4）沒有txt后綴的這樣設置一下（這里以win11為例，點擊查看-->顯示-->文件擴展名）
          （5）把文本文檔名稱改為旋轉木馬.html
          （6）把圖片放在img文件夾里面，需要9張
          （7）圖片重命名為 1.jpg 2.jpg 3.jpg 以此規律命名（200 x 300 像素的圖片）
          （8）設置圖片像素（用win自帶照片軟件打開-->點擊... --> 重設大小-->自定義尺寸-->把寬度改成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;
            /* 設置3D 效果 */
            transform-style: preserve-3d;
            /* 添加3D視距  透視效果 */
            /* perspective: 300px; */
            transform: rotateX(-15deg);
            /* CSS animation動畫屬性 
                name 定義動畫名稱
                duration 定義動畫執行時間   秒/單位
                timing-function 定義動畫執行速度 linear 勻速
                delay 定義動畫執行等待 秒/單位
                iteration-count 定義動畫執行次數 默認為1  無限執行 infinite
                animation-play-state 動畫運行狀態控制 默認running運行  paused 暫停
            */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 10s linear infinite;
        }
        /* 定義關鍵幀動畫  執行我們定義的動畫 */
        @keyframes move{
            0%{
                /* 在CSS3 變幻屬性中  如果要給一個元素添加多個變幻屬性
                    需要將所有的變幻屬性都寫在transform
                 */
                transform:rotateX(-15deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(-15deg) rotateY(360deg);
            }
        }
        /* :hover 偽類選擇器  設置用戶鼠標移入時的效果 */
        .box:hover{
            /* 當用戶鼠標移入時 動畫由默認的運行狀態變成暫停 */
            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){
            /* 改變頁面第一張圖片 變幻屬性
            transform  變幻屬性
            rotate  旋轉
            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機器人Sockets通訊
          天跟大家分享一個很很酷6的一個網站前端小技術，
          打開網頁編輯軟件，新建一個HTML網頁，然后在body里寫下如圖代碼
          然后添加css3樣式代碼如圖
          添加好后點擊鍵盤上的ctrl+s保存，保存路徑隨意
          歡迎大家轉載收藏，有需要源碼的朋友可以關注我后私聊我，還可以加咱們的交流群：309073798
          最后有不好的地方歡迎在留言區吐槽
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
中文字幕精品亚洲无线码一区应用|
亚洲一区精品视频在线|
伊人久久大香线蕉AV一区二区|
国产福利一区二区|
亚洲国产一区国产亚洲|
中文字幕日本一区|
日本免费精品一区二区三区|
一区一区三区产品乱码|
无码人妻一区二区三区在线|
国产免费一区二区三区在线观看|
一区二区三区中文字幕|
糖心vlog精品一区二区三区|
波多野结衣一区二区|
无码少妇一区二区三区浪潮AV|
亚洲成AV人片一区二区|
日本一区二区在线|
国产内射在线激情一区|
久久精品国产一区|
无码午夜人妻一区二区三区不卡视频|
一区二区免费国产在线观看|
国产在线一区视频|
午夜精品一区二区三区在线视|
四虎永久在线精品免费一区二区|
能在线观看的一区二区三区|
无码人妻精品一区二区蜜桃AV|
久久AAAA片一区二区|
综合久久久久久中文字幕亚洲国产国产综合一区首
|
日本无码一区二区三区白峰美
|
精品在线视频一区|
色一乱一伦一区一直爽|
久久精品国产一区二区|
中文字幕一区日韩在线视频|
少妇精品久久久一区二区三区|
久久久av波多野一区二区|
中文字幕日韩一区二区不卡|
国产成人精品亚洲一区|
本免费AV无码专区一区|
一区二区视频在线|
尤物精品视频一区二区三区|
亚洲AV无码一区二区三区国产|
国99精品无码一区二区三区
|