canvas在画布上创建模糊阴影文字
html代码:
<!DOCTYPE html>
<html>
<head>
<title>在画布上创建模糊阴影文字</title>
</head>
<body>
<p>
<input type="button" name="" value="在画布上创建模糊阴影文字" id="myBtn" style="width:410px;">
</p>
<canvas id="myCanvas" width='410' height='130'></canvas>
</body>
</html>
script代码:
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('#myBtn').click(function(){
let myCanvas = document.getElementById('myCanvas');
let myContext = myCanvas.getContext('2d'); //将画布设置为2D
myContext.font='40pt 宋体';
let myHeight = 0;
myContext.fillstyle = 'black'; //画布背景颜色
myContext.fillRect(0,myHeight,410,130); //画布画矩形
myContext.shadowColor = 'white'; //阴影白色底
myContext.shadowOffsetX = 0; //阴影相对于文字的水平距离的X轴
myContext.shadowOffsetY = 0; //阴影相对于文字的垂直距离的Y轴
myContext.shadowBlur = 20; //阴影模糊效果,值值越大模糊越厉害
myContext.fillText('你好张三王五',40,80) //用于在画布上绘制填色的文字
myContext.strokeStyle = 'rgba(0,255,0,1)'; //文字的颜色
myContext.lineWidth = 2; //文字的粗细
myContext.strokeText('你好张三王五',40,80) //填写文字
})
})
</script>
效果如下
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
