Canvas 练习及学习笔记

2016-11-02

在MOOC上 学习了关于 Canvas 的教程 受益匪浅

先上练习的demo

本人用的是 Chorme

暂时没有考虑兼容性问题

1 时钟 https://fanyear.github.io/Canvas/Clock/index.html

2 （放大镜）鼠标左键   https://fanyear.github.io/Canvas/Magnifier/index.html

3 缩放图像  https://fanyear.github.io/Canvas/ScaleImage/index.html

4 星星动画闪烁https://fanyear.github.io/Canvas/StarTwinkling/index.html

5 炫酷计时动画效果 https://fanyear.github.io/Canvas/Timer/index.html

推荐MOOC 教程   http://www.imooc.com/u/108955/courses?sort=publish （一系列教程 讲得很好 有条理）

http://www.imooc.com/learn/338（星星闪烁教程）

一下是我的学习笔记，更多是为了自己忘了的时候可以回来看看：

HTML

1 <canvas id="canvas">
2     Your browser doesn‘t support Canvas　　　　// 当浏览器不支持Canvas 的时候 才会显示
3 </canvas>

JavaScript

 1 var canvas = document.getElementById("canvas");
 2 var context = canvas.getContext("2d");
 3
 4 // canvas  基于状态
 5
 6 context.moveTo(100,100)      // 起点
 7 context.lineTo(200,200)        //可直接使用 若没有moveTo
 8
 9 context.fill()        //绘制
10 context.stroke()
11
12 context.lineWidth = 6
13 context.strokeStyle = "red"
14 context.fillStyle = "blue"
15
16 / * 有多种颜色表示方法  #bbb #123456 rgb(1,2,3) rgba(1,2,3,0.6) hsl(20,50%,28%) hsla(40,80%,20%,0.5)  */

 1 canvas.width = 800
 2 canvas.height = 500         //建议用js设置
 3
 4 //Draw more lines
 5
 6 context.beginPath()
 7
 8 context.closePath()  // 会闭合路径
 9
10 //Draw a Rectangle
11
12 context.rect(x,y,width,height)      //路径
13
14 context.fillRect(x,y,width,height)
15 context.strokeRect(x,y,width,height)     //直接绘制
16
17 //例子
18
19 context.moveTo(100,200)
20 context.lineTo(300,200)
21 context.strokeStyle = "red"
22 context.stroke()
23
24
25 context.moveTo(400,500)
26 context.lineTo(500,500)
27 context.strokeStyle = "blue"
28 context.stroke()
29
30 //结果都为蓝色 应在两段代码之间加上 context.beginPath()
31
32
33
34 // 一般都是先填充 后描边
35
36 lineCap   // butt(default)  round  square
37 lineJoin    //miter(default)  bevel round
38 miterLimit    //有个默认值
39
40 //图形转换
41
42 translate(x,y)      // 位移  效果会叠加 （所以要用到 save() restore()）
43 rotate(deg)            //旋转
44 scale(x,y)        //会改变其他属性
45
46 //变化矩阵
47
48 transform(a,b,c,d,e,f)  //级联
49
50 setTransform(a,b,c,d,e,f)     //不级联
51
52 a     //水平缩放
53 b      //水平倾斜
54 c        //垂直倾斜
55 d        //垂直缩放
56 e        //水平位移
57 f        //垂直位移
58
59 //填充样式
60
61 //Steo 1
62  var grd1 = context.createLinearGradient(xstart,ystart,xend,yend)
63  var grd2 = context.createRadialGradient(x0,y0,r0,x1,y1,r1)
64
65 //Step 2
66 grd1.addColorStop(stop,color)
67 grd2.addColorStop(stop,colot)
68 .
69 .
70 .
71
72 //Step 3
73 context.fillStyle = grd1
74 context.fillStyle = grd2
75
76
77
78 // Pattern
79 var pat = context.craetePattern(img,repeat-style)     //img 还可以是 video canvas
80                                                              //repeat-style 有 no-repeat repeat-x repeat-y repeat
81 context.fillStyle = pat
82
83 //记得加上路径