canvas实战:好玩的文字特效
2020-01-13 本文已影响0人
前端辉羽
本文目录及效果图预览：
-
1.阴影文字
阴影文字效果图.png
-
2.3d拉影文字
3d拉影文字效果图.png
-
3.空心文字
空心文字效果图.png
-
4.线性渐变文字
线性渐变文字效果图.png
-
5.图片填充文字
图片填充文字效果图.png
-
6.涂鸦及将涂鸦图标保存到本地
可以创建一个1000px*600px的画布，使用鼠标进行随意涂鸦，同时还可以点击将所绘制的画布以png图片的形式下载到本地。
目录1-5的html结构都是统一的
<p>
<button id="btn">创建涂鸦</button>
</p>
<canvas id="canvas" width="1000" height="600"></canvas>
js部分我们都是先获取点击按钮，然后给点击按钮绑定generate事件，所有的逻辑代码都是写在generate事件函数中
var btn = document.getElementById("btn")
btn.onclick = generate
var canvas = document.getElementById("canvas")
// 获取绘图环境，参数目前都是2d
var ctx = canvas.getContext('2d')
function generate() {
}
1.阴影文字
function generate() {
// 阴影颜色
ctx.shadowColor = 'gray'
// 阴影相对于文字的水平距离
ctx.shadowOffsetX = 10
// 阴影相对于文字的垂直距离
ctx.shadowOffsetY = 10
// 模糊效果
ctx.shadowBlur = 20
ctx.font = '100px Arail'
// 100和200就是我们绘制出来的图形相对于画布的x坐标和y坐标
ctx.fillText('HELLO WORLD', 100, 200)
}
2.3d拉影文字
拉影文字通过多次循环绘制文字阴影，同时通过偏移量和透明度的渐变，来实现3d效果
function generate() {
// 填充背景颜色
ctx.fillStyle = 'white'
// 画矩形,第一第二个参数是画笔起始点的x坐标和y坐标
// 第三第四个参数是宽度和高度
ctx.fillRect(0, 0, 800, 600)
ctx.font = '100px Arial'
for (var i = 0; i < 5; i++) {
ctx.fillStyle = 'gray'
ctx.fillText('HELLO WORLD', 100, 200)
ctx.shadowColor = 'rgba(0,0,0,' + (5 - i) / 5 + ')'
ctx.shadowOffsetX = i + 4
ctx.shadowOffsetY = i * 4
ctx.shadowBlur = i * 4
}
}
3.空心文字
function generate() {
ctx.font = '100px Arail'
// 设置边线的颜色
ctx.strokeStyle = 'green'
// 设置空心文字的内容
ctx.strokeText('HELLO WORLD',100,200)
}
4.线性渐变文字
function generate() {
ctx.font = '100px Arail'
// 首先创建canvas提供的线性渐变的对象
// 第一第二个参数是渐变起点的x坐标和y坐标
// 第三第四个参数是渐变终点的x坐标和y坐标
var ctxGradient = ctx.createLinearGradient(100, 200, 600, 200)
// 第一个参数0代表的起点，1代表终点
// 第二个参数代表的是颜色
ctxGradient.addColorStop(0, 'red')
ctxGradient.addColorStop(.5, 'yellow')
ctxGradient.addColorStop(1, 'blue')
// 填充颜色
ctx.fillStyle = ctxGradient
// 写入文字
ctx.fillText('HELLO WORLD', 100, 200)
}
5.图片填充文字
function generate() {
// 在canvas中创建图片对象
ctxImg = new Image()
// 设置图片链接
ctxImg.src = 'https://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1596697694&t=d1cdff4144a92fd685442fbdd7cb7fc9'
// 加载图片完成后会触发onload回调函数
ctxImg.onload = function () {
// 抓取图片准备使用，第二个参数有四个选择
// repeat重复，repeat-x只重复x方向，repeat-y只重复y方向，no-repeat不重复
var ctxPattern = ctx.createPattern(ctxImg, 'repeat')
// 使用图片进行填充
ctx.fillStyle = ctxPattern
ctx.font = '100px Arail'
ctx.fillText('HELLO WORLD', 100, 200)
}
}
6.涂鸦及将涂鸦图标保存到本地
html结构代码
<p>
<button id="btn">创建涂鸦</button>
<button id="btn2">保存涂鸦到本体</button>
</p>
<canvas id="canvas" width="1000" height="600"></canvas>
js代码
var btn = document.getElementById("btn")
btn.onclick = generate
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
function generate() {
// 先把画布填充上颜色，明确可以进行涂鸦的区域
ctx.fillStyle = 'skyblue'
ctx.fillRect(0, 0, 1000, 600)
// 涂鸦从鼠标点击下去开始
canvas.onmousedown = function (e) {
var x = e.clientX - canvas.offsetLeft
var y = e.clientY - canvas.offsetTop
// 告诉浏览器我们要重复开始一段绘制
ctx.beginPath()
// 移动开始绘制的画笔起点
ctx.moveTo(x, y)
canvas.onmousemove = function (e) {
var mx = e.clientX - canvas.offsetLeft
var my = e.clientY - canvas.offsetTop
ctx.strokeStyle = 'red'
ctx.lineWidth = 5
// 移动的过程中绘点连线
ctx.lineTo(mx, my)
// 一定要调用下这个方法，路径才能绘制出来
ctx.stroke()
}
canvas.onmouseup = function (e) {
canvas.onmousemove = null
}
}
}
var btn2 = document.getElementById("btn2")
btn2.onclick = handleImg
function handleImg() {
// 第一个参数是要保存的图片格式，第二个参数是文件质量，1为最高质量
var imgData = canvas.toDataURL('image/png', 1)
// 拿到的数据含有base64编码形式的图片资源
console.log(imgData)
var a = document.createElement('a')
a.href = imgData
// h5中的a标签可以提供直接点击下载的download属性，属性值就是下载的文件的默认名称
a.download = 'imgData'
// 模拟点击a标签，触发下载效果
a.click()
}
