2020-08-07 Source of topic: http://www.h-camel.com/index.html
[html] Please use canvas to draw a gradient rectangle
Gradients can be filled in rectangles, circles, lines, texts, etc., various shapes can be defined with different colors.
There are two different ways to set the Canvas gradient:
createLinearGradient(x,y,x1,y1)-create a line gradient
createRadialGradient(x,y,r,x1,y1,r1)-create a radial/circular gradient
When we use gradient objects, we must use two or more stop colors.
The addColorStop() method specifies the color stop, and the parameters are described by coordinates, which can be 0 to 1.
To use a gradient, set the fillStyle or strokeStyle to a gradient, and then draw a shape such as a rectangle, text, or a line.
<!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>
[css]] What happens when the value of background or background-image in css is url() or url(#)? why? How to solve?
From the perspective of phenomenon, there is nothing, that is, there is no picture. But in fact one more http request will be sent.
Solution: Use base64 to encode the picture, or add a background color.
[js] What is the result of window.length in the browser? why
The return result of window.length is the number of frames in the current window.
[Soft Skills] Explain what the internal network IP and public network IP are
1. The public network ip is unique in the world, the internal network ip is unique only in the local area network, and the internal network ip of all computers in a local area network are different from each other, but they share the same external network ip
2. In the local area network, you can assign ip by yourself, which is only valid in the local area network. If the computer is connected to the Internet, the server of the network operator needs to provide an external network IP.
3. The ipv4 address resources are becoming more and more tense. The IANA organization reserves some ip addresses for use in local area networks.
IP address space:
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
In other words, if the ip address you find is within the range of the above A, B, and C IP addresses, it must be the ip address of the local area network, otherwise it is the address of the public network.