首页 > 代码库 > Canvas 练习及学习笔记

Canvas 练习及学习笔记

2024-08-18 15:19:46   221人阅读

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 //记得加上路径

 

Canvas 练习及学习笔记


联系
我们