There are 100+ columns of canvas example tutorials, providing basic knowledge of canvas, advanced animation, related application extensions and other information. As a part of HTML, canvas is an important foundation for the visualization of images, icons and maps. Learning canvas will be very important in other applications.
Article directory
How to use canvas to set hollow text? Canvas has a built-in method for setting hollow text, just use ctx.strokeText. In a previous article, we talked about setting solid text . The fill color of the text uses fillStyle, and the border color of the text uses strokeStyle. The text size and text are set using ctx.font.
grammar:
context.strokeText(text, x, y [, maxWidth]);
parameter:
The meaning and function of each parameter are as follows:
Text
String
information used to fill in text.
xNumber
The abscissa of the starting point of the filled text.
yNumber
is the ordinate of the starting point of the filled text.
maxWidth (optional)Number
fills the maximum width occupied by text. When the width occupied by text exceeds this maximum width, the width of each text is compressed to adapt instead of wrapping.
Here is an example from the Great Sword Master for reference:
Example renderings
Sample source code (83 lines in total)
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-09
*/
<template>
<div class="djs_container">
<div class="top">
<h3>canvas设置空心文字</h3>
<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
<h4>
<el-button type="primary" size="mini" @click="draw()">绘制</el-button>
<el-button type="danger" size="mini" @click="clearCanvas()">清除</el-button>
</h4>
</div>
<div class="dajianshi ">
<canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ctx: null,
canvas: null,
}
},
mounted() {
this.setCanvas()
},
methods: {
clearCanvas(){
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
setCanvas() {
this.canvas = document.getElementById('dajianshi');
if (!this.canvas.getContext) return;
this.ctx = this.canvas.getContext("2d");
},
draw() {
this.ctx.strokeStyle='red';
this.ctx.font = '80px STheiti, SimHei';
this.ctx.strokeText('基本的空心文字', 224, 166);
this.ctx.strokeStyle='green';
this.ctx.strokeText('含最大长度的空心文字', 524, 366,200);
},
}
}
</script>
<style scoped>
.djs_container {
width: 1000px;
height: 680px;
margin: 50px auto;
border: 1px solid #994170;
position: relative;
}
.top {
margin: 0 auto 0px;
padding: 10px 0;
background: #994170;
color: #fff;
}
.dajianshi {
margin: 5px auto 0;
border: 1px solid #ccc;
width: 980px;
height: 490px;
background-color: #f9f9f9;
}
</style>
canvas basic properties
| Attributes | Attributes | Attributes |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |