练习一下canvas对文本的基本应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label for="name">
文字：
<input type="text" id="name" value="默认文字默认文字默认文字">
</label>
</div>
<div>
<label for="size">
文字大小：
<input type="number" id="size" value="50">
</label>
</div>
<div>
<label for="font">
文字字体：
<select name="font" id="font">
<option value="楷体" selected>楷体</option>
<option value="黑体">黑体</option>
<option value="宋体">宋体</option>
</select>
</label>
</div>
<div>
<label for="fontColor">
文字颜色：
<input type="color" id="fontColor">
</label>
</div>
<div>
<label for="rimColor">
边框颜色：
<input type="color" id="rimColor" value="#ff0000">
</label>
</div>
<div>
文字类型：
<label>
<input type="radio" name="fontType" value="1" checked> 边框与文字
</label>
<label>
<input type="radio" name="fontType" value="2"> 仅边框
</label>
<label>
<input type="radio" name="fontType" value="3"> 仅文字
</label>
</div>
<div>
设置文字渐变：
<label>
<input type="radio" name="gType" value="1" checked> 是
</label>
<label>
<input type="radio" name="gType" value="2"> 否
</label>
</div>
<div>
<label for="fontColor">
文字渐变色2：
<input type="color" id="fontColor2" value="#ff0000">
</label>
</div>
<div>
<label for="fontColor">
文字渐变色3：
<input type="color" id="fontColor3" value="#5bba18">
</label>
</div>
<div>
设置文字阴影：
<label>
<input type="radio" name="shadowType" value="1" checked> 是
</label>
<label>
<input type="radio" name="shadowType" value="2"> 否
</label>
</div>
<div>
<label for="fontColor">
阴影颜色：
<input type="color" id="shadowColor" value="#eabc06">
</label>
</div>
<div>
<label for="size">
阴影模糊范围：
<input type="number" id="shadowRange" value="20">
</label>
</div>
<div>
<input type="button" id="button" value="生成文字">
</div>
<canvas id="demo" width="1200" height="600" style="background: white"></canvas>
<script type="text/javascript">
const demo = document.getElementById("demo");
// 绘制平面图形
const demoConfig = demo.getContext("2d");
const button = document.getElementById("button");
button.addEventListener('click', function () {
demoConfig.clearRect(0, 0, 1200, 600);
const name = document.getElementById("name").value;
const size = document.getElementById("size").value;
const font = document.getElementById("font").value;
const fontColor = document.getElementById("fontColor").value;
const rimColor = document.getElementById("rimColor").value;
const fontType = document.querySelector('input[name="fontType"]:checked').value;
const gType = document.querySelector('input[name="gType"]:checked').value;
const shadowType = document.querySelector('input[name="shadowType"]:checked').value;
demoConfig.font = size + "px " + font;// 设置文字大小与字体
demoConfig.strokeStyle = rimColor;// 设置边框颜色
if (gType === '1'){
const fontColor2 = document.getElementById("fontColor2").value;
const fontColor3 = document.getElementById("fontColor3").value;
const g1 = demoConfig.createLinearGradient(0, size, name.length*size/2, size);
g1.addColorStop(0, fontColor);
g1.addColorStop(0.5, fontColor2);
g1.addColorStop(1, fontColor3);
demoConfig.fillStyle = g1;// 设置字体渐变
}else {
demoConfig.fillStyle = fontColor;// 设置字体颜色
}
if (shadowType === '1'){
const shadowColor = document.getElementById("shadowColor").value;
const shadowRange = document.getElementById("shadowRange").value;
demoConfig.shadowColor = shadowColor;
demoConfig.shadowBlur = shadowRange;
}
if (fontType === '1' || fontType === '2'){
demoConfig.strokeText(name, 0, size);
}
if (fontType === '1' || fontType === '3'){
demoConfig.fillText(name, 0, size);
}
})
</script>
</body>
</html>