JS30-Day16 & Day19 练习重点整理

JS30-Day16-CSS Text Shadow Mouse Move Effect

一个滑鼠移动时产生特效的实作

1. this vs. e.target

this: 被监听的元素本身，例如:

hero.addEventListener('mousemove', shadow);

shadow函式内，this 在此为 hero

e.target: 指事件被触发时的对象

JS30-Day19-Unreal Webcam Fun

建立一个 web 相机，而且附有多种特别的效果

1. navigator.mediaDevices.getUserMedia

用来取得视讯影像，会搭配 promise 使用

navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(stream => {  // do something...}).catch(err => {  // do something...});

MDN 介绍 navigator.mediaDevices.getUserMedia

2. ctx.getImageData(sx, sy, sw, sh)

取得 canvas 某块区域的像素值，sx 为区域的左上角 x 座标，sy 为区域的左上角 y 座标，sw 为区域宽，sh 为区域高

MDN 介绍 ctx.getImageData(sx, sy, sw, sh)

3. ctx.putImageData(imageData, dx, dy)

把某块区域的像素值呈现在指定的位址上

MDN 介绍 ctx.putImageData(imageData, dx, dy)

4. canvas.toDataURL('image/jpeg')

这个语法可以把图片转成 base64

// html// <canvas id="canvas" width="5" height="5"></canvas>var canvas = document.getElementById("canvas");var dataURL = canvas.toDataURL();console.log(dataURL);

5. insertBefore(newnode,existingnode)

在特定的 DOM 元素前面插入新的子节点

// html// <ul id="myList"><li>Coffee</li><li>Tea</li></ul>// <button onclick="myFunction()">Try</button>function myFunction() {  var newItem = document.createElement("LI");  var textnode = document.createTextNode("Water");  newItem.appendChild(textnode);  var list = document.getElementById("myList");  list.insertBefore(newItem,list.childNodes[0]);}

6. canplay 监听事件

当影片可以开始拨放影片的时候触发此事件

const video = document.querySelector('video');video.addEventListener('canplay', (event) => {  console.log('Video can start, but not sure it will play through.');});

全部练习的程式码都在此连结:
https://github.com/a90100/JavaScript30