第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

1. querySelector() 方法僅僅返回匹配指定選擇器的第一個元素

2. e.target 是目標對象，e.event是目標所發(fā)生的事件。
   

//Canvas繪制的總體步驟
//1.創(chuàng)建HTML頁面，設置畫布標簽
????<canvas?id="cvs"></canvas>
//2.編寫js，獲取DOM對象
????var?cvs?=?document.getElementById('cvs');?//畫布
//3.獲取2D上下文
????var?ctx?=?cvs.getContext('2d');?//?畫筆
//4.設置繪制線樣式、顏色
??ctx.fillStyle?=?"red";
??ctx.strokeStyle?=?"red";
//5.繪制矩形，或者填充矩形(x,y,w,h)
??ctx.strokeRect(10,?10,?190,?100);
??ctx.fillRect(20,?10,?20,?20);
??
??直線：
???ctx.moveTo(50,50);
???ctx.lineTo(200,200);
???ctx.stroke();
??圓：
???cxt.beginPath();???
???cxt.arc(50,50,40,2,Math.PI*2,true);????
???cxt.closePath();???
???cxt.stroke();
??漸變：
???var?c=document.getElementById("myCanvas");
???var?cxt=c.getContext("2d");
???var?grd=cxt.createLinearGradient(0,0,175,50);
???grd.addColorStop(0,"#FF0000");
???grd.addColorStop(1,"#00FF00");
???cxt.fillStyle=grd;
???cxt.fillRect(0,0,175,50);
??圖像;
???var?c=document.getElementById("myCanvas");
???var?cxt=c.getContext("2d");
???var?img=new?Image()
???img.src="flower.png"
???cxt.drawImage(img,0,0);

1. svg是基于XML標記語言可縮放矢量圖形，支持無損縮放。

2. SVG的優(yōu)勢：

   文件體積小，能夠被大量的壓縮

   圖片可以無限放大而不失真（矢量圖的基本特征）

   在視網膜顯示屏上效果極佳

   能夠實現(xiàn)互動和濾鏡效果

3. viewport是SVG圖像的可見區(qū)域，個SVG圖像理論上可以無限大，但是在同一時刻只有圖像的某些部分可以被看見。這個可見的區(qū)域就被稱為viewport。

   在<svg>元素中使用width和height屬性來指定viewport的尺寸。

4. <svg?width="100px"?height="50px"></svg>//單位可帶可不帶,默認為px

5. 詳情見：https://developer.mozilla.org/zh-CN/docs/Web/SVG
   

https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js

?//1.傳建一個觀察者對象
??var?observer=new?Observer();
?//2.?通過subscribe方法，實現(xiàn)一個函數的觀察
?observer.publish("任務名",處理函數)?
?//3.?通過publish觸發(fā)觀察事件，在任意時刻觸發(fā)了這個觀察的任務名，將會觸發(fā)這個事件訂閱subscribe方法
?observer.punlish("任務名")
?//4.?取消事件訂閱，意味著就不會執(zhí)行了
?observer.unsubscribe("任務名")

1. deferred對象是jQuery對Promises接口的實現(xiàn)
   

   詳解見https://www.cnblogs.com/losesea/p/4415676.html

2. var?dtd=$Deferred();//創(chuàng)建
   dtd.resolve();????//成功
   dtd.then();??????????//執(zhí)行回調

   
   

1.3D視圖：
????需要指定一個元素為容器并設置transform-style:preserve-3d，這樣它的后代元素也會有3D效果
????（如果孫元素也有3D效果，還需給子元素設置preserve-3d）
????三維變形也可以用transform屬性來設置
????可以呈現(xiàn)3D的屬性：translate3d、?scale3d???rotateX??rotateY??rotateZ

2.透視效果：
????perspective(length)?為一個元素設置三維透視的距離。僅作用于元素的后代，而不是其元素本身。

1.background-size解決自適應問題

2.運動=關鍵幀+坐標變化（position+translate）

3.?transition-property:?width;(過渡的CSS屬性的名稱)
???transition-duration:?1s;(過渡效果花費的時間。默認是?0。)
???transition-timing-function:?linear;(過渡效果的時間曲線。默認是?"ease"。)
???transition-delay:?2s;(過渡效果何時開始。默認是?0。)
???簡寫：$(".bird").transition({????'right':?"3rem",},?10000,'linear',function(){????alert("結束")});

1. CSS3的animation的八個屬性：
   animation-name:動畫名
   animation-duration:時間
   animation-delay：延時
   animation-iteration-count：次數
   animation-derection：方向
   animation-play-state：控制
   animation-fill-mode：狀態(tài)
   animation-timing-function：關鍵幀變化steps()函數

2. 簡寫animation:(name?duration?timing-function?iteration-count)

3. -moz-?支持火狐瀏覽器

4. -webkit-???支持Safari和chrome

5. -o-?支持Opera

   
   

1.resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize'
//用來監(jiān)聽當然窗口的變化，一旦有變化就需要重新設置根字體的值
2.window.addEventListener(resizeEvt,?recalc,?false);
document.addEventListener('DOMContentLoaded',?recalc,?false);
//綁定瀏覽器縮放和加載時間
3.docEl.style.fontSize?=?20?*?(docEl.clientWidth?/?320)?+?'px';
//表示在不同屏幕尺寸下，設置不同的跟字體大小，比如在320的屏幕尺寸下，跟字體大小為16px.
4.16px=1rem

：呈現(xiàn)3d效果需要3部分

1. ?父元素或者當前運動元素上設置透視角perspective，perspective屬性的值決定了3D效果的強度

2. 3D視圖，設置在父元素上，子元素都可以相對與父元素的平面進行3d變形操作

3. 3D變形函數，translate3d、scale3d、rotateX、rotateY、rotateZ等等

animation-name ：動畫名 animation-duration：時間 animation-delay：延時 animation-iteration-count：次數 animation-direction：方向 animation-play-state：控制 animation-fill-mode：狀態(tài) animation-timing-function：關鍵幀變化

一、 技術點分解

知識點2

知識點1