在画布上创建向上的3D拉影文字
<canvas id="myCanvas" width="410" height="130"></canvas>
<script src="jquery.min.js"></script>
<script>
$(function () {
var myCanvas = document.getElementById('myCanvas');
var myContext = myCanvas.getContext('2d');
myContext.font = "40pt 宋体";
var height = 0;
myContext.fillStyle = "black";
myContext.fillRect(0, height, 410, 130);
for (var i = 0; i < 10; i++) {
myContext.shadowColor = `rgba(255,255,255,${(10 - i) * 10})`;
// 特效文字一
myContext.shadowOffsetX = i+2;
myContext.shadowOffsetY = i+2;
// 特效文字二
// myContext.shadowOffsetX = -i+2;
// myContext.shadowOffsetY = -i+2;
myContext.shadowBlur = i*2;
myContext.fillStyle = "rgba(127,127,127,1)";
myContext.fillText("炫酷实例锦集", 40, 80, 300);
}
}); // onload
</script>
- font
字体
- fillStyle
填充颜色,填充图形、文字等
- fillRect()
绘制矩形
- shadowColor: 阴影颜色
- shadowOffsetX: x轴阴影方向偏移量
- shadowOffsetY: x轴阴影方向偏移量
- shadowBlue: 阴影模糊效果,值越大,模糊越厉害
- fillText: 填充文字
- strokeText: 绘制文字,没有填充