canvas制造渐变和图案填充文字

效果如图

这里主要是利用了 context的createPattern的方法
这个方法接受两个参数 第一个参数是要填充的图案，第二个参数是图案重复方式

制造颜色渐变的方法是createLinearGradient

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var image=new Image();
var gradient=context.createLinearGradient(0,0,canvas.width,canvas.height)
var text="Canvas"
var pattern;
function drawGradientText(){
  context.fillStyle=gradient
  context.fillText(text,65,200)
  context.strokeText(text,65,200)

}
function drawPatternText(){
    context.fillStyle=pattern
    context.fillText(text,65,450)
    context.strokeText(text,65,450)
}
image.onload=function(e){
    pattern=context.createPattern(image,"repeat")
    drawPatternText()
}
image.src="./images/hover2.png"
context.font="256px Palation"
context.strokeStyle="cornflowerblue"



context.shadowColor="rgba(100,100,150,0.8)"
context.shadowOffsetX=5
context.shadowOffsetY=5
context.shadowBlur=10

gradient.addColorStop(0,"blue")
gradient.addColorStop(0.25,"blue")
gradient.addColorStop(0.5,"white")
gradient.addColorStop(0.75,'red')
gradient.addColorStop(1.0,'yellow')

drawGradientText()