美文网首页
canvas制造渐变和图案填充文字

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

作者: infi_ | 来源:发表于2018-04-02 15:54 被阅读0次

    效果如图



    这里主要是利用了 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()
    

    相关文章

      网友评论

          本文标题:canvas制造渐变和图案填充文字

          本文链接:https://www.haomeiwen.com/subject/jwlxhftx.html