Canvas 笔记（持续更新中）

1.从线条开始

---

HTML

<canvas id="canvas"></canvas>

Javascript

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d")      

• canvas.width
• canvas.height
• canvas.getContext("3d")

 

 

moveTo(x,y)

lineTo(x,y)

 

beginPath()

closePath()

 

lineWidth

strokeStyle

fileStyle

 

fill()

stroke()

 

绘制矩形

rect（x,y,width,height）

 

fillRect（x,y,width,height）

strokeRect（x,y,width,height）

 

2.线条属性

---

• lineWidth
• lineCap = "but" (default)

                        "round"

                        "square"

• lineJion = "miter"(default)

                        "bevel"

                        "round"

• miterLimit

3.星空和图片变换

---

save()

restore()

 

translate(x,y)

retate(deg)

scale(sx,sy)

 

transform(a,b,c,d,e,f)

setTransform(a,b,c,d,e,f)

 

4.渐变色和纹理

---

fillStyle = color                         fillStyle = color                                                         

               gradient                                   #ffffff

               image                                      #642

               canvas                                    reb(255,128,0)              

               video                                       reba(100,100,100,0.8)

                                                               hsl(20,62%,28%)

                                                               hsla(40,82%,33%,0.6)

                                                                red

 

 

fillStyle = gradient   

var gra=context.creatLineatGradient(xstart,ystart,xend,yend)

 

Radial Gradient

var gra=context.creatRadialGradient(x0,y0,r0,x1,y1,r1)

 

gra.addColorStop(stop,color)

 

 

fillStyle = image || canvas || video

createPattern(img,       repeat-style)

createPattern(canvas, repeat-style)

createPattern(video,    repeat-style)

 

repeat-style : no-repeat

                      repeat-x

                      repeat-y

                      repeat

 

strokeStyle 也同样有以上所有特性

 

5.曲线的绘制

---

 

context.arc(centerx,centery,radius,startingAngle.endingAngle,anticlockwise = false)

 

content.arcTo(x1,y1,x2,y2,redius)

 

贝塞尔曲线

context.quadraticCurveTo(x1,y1,x2,y2)

 

context.bezeirCurveTo(x1,y1,x2,y2,x3,y3)

 

6.文字渲染

---

context.font="bold 40px Arial "

 

context.fillText(string,x,y,[maxlen])

 

context.strokeText(string ,x,y,[maxlen])

 

font:  默认值 “20px sans-serif”

         context.font=  font-style font-variant font-weight  font-sie font-family

 

context.textAlign= left || center || right   水平方向https://app.yinxiang.com/Home.action#b=193344e8-df83-482a-adb0- e7a9cfe48751&st=p&n=8846726d-9006-4772-9e7f-68800fe0d3b0

context.textBaseline= top || middle || bottom || alphabetic(default) || ideographic || hanging  垂直方向

 

context.measureText(string).width  (文本度量)

 

7Canvas高级内容

---

context.shadowColor 

context.shadowOffsetX

context.shadowOffsetY

context.shadowBlur

 

globalAlpha  全局透明度

globleCompositeOperation （11中赋值）

 

context.clip()  探照定效果

 

非零环绕原则  （同心圆）

 

context.isPointInPath(x,y)

 

 

 

 

8.canvas标准

---

w3c

http://www.w3.org/TR/2dcontext/

 

WHATWG

https://html.spec.whatwg.org/

 

convas.context 扩展

CanvasRenderingContext2D.prototype.fillStart = function(){

}//自己定义context函数

 

canvas 兼容性

canvas 兼容ie 6，7，8

https://code.google.com/p/explorercanvas/

 

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

//github中有解释 https://github.com/arv/ExplorerCanvas

canvas图形库

canvasplus   https://code.google.com/p/canvasplus

Artisan JS   http://artisanjs.com

Rgraph       https://roopons.com.au/wp-content/plugins/viral-options/rgraph