Canvas学习笔记之色彩

canvas 学习笔记 -- by Damon

colors

ctx.fillStye = color
ctx.strokeStyle = color
ctx.globalAlpha = alphaValue // 0 ~ 1

line styles

ctx.lineWidth = value
ctx.lineCap = type 
// ['butt', 'round', 'square']
ctx.lineJoin = type
// ['round','bevel','miter']
ctx.miterLimit = value
// lineJoin miter limit 内外交点的距离
ctx.getLineDash()
ctx.setLineDash(segments)
ctx.lineDashOffset = value

gradient

ctx.createLinearGradient(x1, y1, x2, y2)
// (x1, y1) => (x2, y2)
ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)
// circle1 circle2

pattern

var pattern = ctx.createPattern(img, 'repeat')
// img对象
ctx.fillStyle = pattern;

shadow

ctx.shadowoffsetX
ctx.shadowOffsetY
ctx.shadowBlur
ctx.shadowColor

fill

ctx.fill('evenodd')
ctx.fill('nonzero')

fillText/strokeText

ctx.font = 10px sans-serif
ctx.textAlign = start, end, left, right or center
ctx.textBaseline = top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = ltr, rtl, inherit
ctx.measureText(String)// => TextMetrics object

Paste_Image.png

代码地址
Demo地址