渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CANVAS</title> </head> <body> <h3>渐变颜色的矩形</h3> <p>createLinearGradient(x,y,x1,y1); 坐标 从 (x,y) 到 (x1, y1) 创建线条渐变</p> <p>createRadialGradient(x,y,r,x1,y1,r1); 坐标 从 (x,y) 到 (x1, y1) r1为半径，创建径向渐变</p> <p>addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1</p> <h5>线条渐变</h5> <canvas id="rectangleLinear"></canvas> <h5>径向渐变</h5> <canvas id="rectangRadial"></canvas> </body> <script> //1.线条渐变 let c = document.getElementById("rectangleLinear"); let ctx = c.getContext("2d"); // 渐变 let grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 填充 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); //2.径向渐变 let r = document.getElementById("rectangRadial"); let rxt = r.getContext("2d"); let radGrd = rxt.createRadialGradient(75, 50, 5, 90, 60, 100); radGrd.addColorStop(0, "red"); radGrd.addColorStop(0.4, "yellow"); radGrd.addColorStop(1, "green"); rxt.fillStyle = radGrd; rxt.fillRect(10, 10, 150, 80); </script> </html>
从现象来看，并没有什么，也就是没有图片而已。但实际上会多发一个http的请求。
解决： 使用base64编码图片，或添加一个背景色。
window.length 的返回结果是当前窗口中的frames的数量。
1.公网ip具有全世界的唯一性，内网ip只在局域网中具有唯一性，且一个局域网中所有电脑的内网ip互不相同，但共用一个外网ip
2.局域网中，可以自己分配ip，只在局域网中有效。如果电脑连接互联网，则需要网络运营商的服务器提供一个外网ip。
3.ipv4地址资源越来越紧张，IANA组织预留部分ip地址作为局域网使用，
IP地址空间：
a类网 10.0.0.0~10.255.255.255 b类网 172.16.0.0~172.31.255.255 c类网 192.168.0.0~192.168.255.255也就是说，如果你查到的ip地址在以上A、B、C类IP地址的范围内，它一定就是局域网的ip地址，否则就是公网的地址。
