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="120"></canvas>
</body>
</html>
script代码:
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('#myBtn').click(function(){
let myCanvas = document.querySelector("#myCanvas");
let myContext = myCanvas.getContext('2d');
myContext.font = '40pt 宋体'
let myHeight= 0;
myContext.fillStyle = 'black' //设置背景颜色
myContext.fillRect(0,myHeight,myCanvas.width,130)//绘制背景矩形
myContext.lineWidth = 3;
myContext.strokeStyle = 'green'; //设置描边颜色
myContext.strokeText("你好张三李四",40,80) //设置描边文本
myContext.fillStyle= 'white'; //设置填充颜色
myContext.fillText('你好张三李四',40,80) //绘制填充文本
})
})
</script>
效果如下
