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 set text shadow using canvas? Canvas has a built-in shadow method, just use ctx.shadowBlur. The fill color of the graphic uses fillStyle, and the border color of the graphic uses strokeStyle.
grammar:
context.shadowBlur = value;
context.shadowColor = 'color value';
parameter:
value is used to specify the blur level of the shadow. The default value is 0, which means no blur.
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-06
*/
<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.shadowColor = 'red';
this.ctx.shadowBlur = 10;
this.ctx.strokeStyle = "#0f0";
this.ctx.lineWidth=4;
this.ctx.beginPath();
this.ctx.arc(450,200,100,0,2 * Math.PI );
this.ctx.stroke();
},
}
}
</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 |