Html5 Canvas开发之插入图片、设置背景、渐变、文本、阴影

1.插入图片

            等图片加载完，再执行canvas操作

 -图片预加载：在onload中调用

            drawImage(olmg,x,y,w,h)

-olmg:当前图片x,y：坐标w,h：宽高

简单例子：

复杂例子：

设置背景：

createPattern(olmg,平铺方式)

-平铺参数为：repeat、repeat-x、repeat-y、no-repeat

3.渐变

createLinearGradient(x1,y1,x2,y2)

-线性渐变：

-第一组参数：起始点坐标、第二组参数：结束点坐标

-addColorStop(位置、颜色)添加渐变点

createRadialGradient(x1,y1,r1,x2,y2,r2)

-放射性渐变：

-参数：第一个圆的坐标和半径，第二个圆的坐标和半径

线性渐变

放射性渐变：

4.文本

stokeText(文字,x,y)

-文字边框

fillText(文字,x,y)

-文字填充

font

-文字大小：‘60px impact’

textAlign

-默认是start跟left一样的效果 end right center

textBaseline

-文字上下的位置的方式默认：alphabetic

measureText()

-measureText(str).width:只有宽度，没有高度

例：文字居中

5.阴影

shadowOffsetX、shadowOffsetY

-x轴偏移、y轴偏移

shadowBlur

-高斯模糊值

shadowColor

-阴影颜色