码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas 笔记(持续更新中)

时间:2014-11-02 22:29:04      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:style   io   color   ar   os   java   for   sp   div   

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 也同样有以上所有特性
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Canvas 笔记(持续更新中)

标签:style   io   color   ar   os   java   for   sp   div   

原文地址:http://www.cnblogs.com/lechenging/p/4070024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!