1，建立一个canvas 画布：

1  2  3  4     
      5     
      6     
      7      8     16 17 18     
     19 20 

1.2  动态创建canvas ：

1   6     

1.3 使用canvas :画直线

1  2  3  4     
      5     
      6     
      7      8     18     29 30 31     
     32 33 

 

1.4 canvas 作画：画圆弧

1  2  3  4     
      5     
      6     
      7      8     17     30 31 32     
     33 34 

运行结果：

 

2.1  sessionStorage 基础：浏览器上的临时变量，只要不关闭，临时变量就一直存在，直到关闭浏览器。临时变量的设置：window.sessionStorage.setItem('name','值');  获取临时变量：window.session.getItem('name')

1  2  3  4     
      5     
      6     
      7      8     10     31 32 33     34     35     36 37 

运行结果：

 

 

 

2.2  localStorage :永久性存储，与sessionStorage不同的是，关闭浏览器，变量的值也不会消失

1  2  3  4     
      5     
      6     
      7      8     31 32 33     34     35     36 37 

运行结果：关闭浏览器之后，之前设置的变量还在，还可以直接通过window.localStorage.getItem('属性名') 来直接获取

 

3. localStorage 的应用：在网页中输入变量名称，关闭网页时，变量名称存储的值还在，当再次打开网页时，浏览器直接调用 localStorage 中的值

1  2  3  4     
      5     
      6     
      7      8     10     41 42 43     
44         用户名：45     
46     
47     
48         性别：
49          男50          女51     
52     
53         备注：54         55     
56 57 

运行结果：