canvas制造渐变和图案填充文字
效果如图
文章图片
这里主要是利用了 context的createPattern的方法
这个方法接受两个参数 第一个参数是要填充的图案，第二个参数是图案重复方式
【canvas制造渐变和图案填充文字】制造颜色渐变的方法是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="https://www.it610.com/article/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=10gradient.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（一）基本用法
- 绝不要无端的给自己制造障碍，更不要放弃自己。
- vue|vue canvas 手绘进度条动画
- canvas不过如此（一）
- HTML|HTML canvas中translate()与rotate()的理解
- 如今东莞制造业工厂大量缺少工人，换套薪酬模式让员工拼命干
- 跟着项目学|跟着项目学 Android Canvas
- Winner稳健医疗全棉水刺无纺布及其制品获制造业单项冠军
- canvas|canvas 入门
- React|React Native实现一个渐变进度条