标签: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"
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