<!DOCTYPE html>
<html>
<head>
<title>Canvas 印章</title>
<style>
body {
font-family: sans-serif;
}
#canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Canvas 印章</h1>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 印章文字
const text = '示例印章';
// 印章颜色
const sealColor = 'red';
// 绘制圆形
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2 * 0.8; // 半径略小于 canvas 一半
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'transparent'; // 圆圈内部透明
ctx.strokeStyle = sealColor;
ctx.lineWidth = 5;
ctx.stroke();
// 绘制文字
ctx.font = 'bold 24px sans-serif'; // 文字大小和字体
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = sealColor;
ctx.fillText(text, centerX, centerY);
// 绘制五角星 (可选)
function drawStar(ctx, x, y, radius, color) {
ctx.save();
ctx.beginPath();
ctx.translate(x, y);
ctx.moveTo(0, -radius);
for (let i = 0; i < 5; i++) {
ctx.rotate(Math.PI / 5 * 2);
ctx.lineTo(0, -radius * 0.5);
ctx.rotate(Math.PI / 5 * 2);
ctx.lineTo(0, -radius);
}
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
// 在印章中央绘制五角星
drawStar(ctx, centerX, centerY, radius * 0.2, sealColor);
</script>
</body>
</html>
代码解释:
- 获取 Canvas 和上下文: 获取 canvas 元素和 2D 绘图上下文。
- 设置样式: 设置印章文字、颜色、圆形半径等。
- 绘制圆形: 使用
arc()方法绘制圆形，设置填充颜色为透明，边框颜色为sealColor，边框宽度为 5。 - 绘制文字: 设置字体、对齐方式、基线和填充颜色，然后使用
fillText()方法绘制文字。 - 绘制五角星 (可选):
drawStar函数绘制一个五角星。可以修改或移除这部分代码。
关键改进和说明：
- 透明背景: 将圆形填充设置为透明 (
fillStyle = 'transparent')，这样印章背景就不会遮挡页面内容。 - 可自定义: 可以轻松修改
text、sealColor等变量来自定义印章。 - 五角星 (可选): 添加了绘制五角星的函数，使印章更具样式。可以根据需要调整大小和颜色，或者移除这部分代码。
- 尺寸控制: 使用
canvas.width / 2 * 0.8控制圆形半径，使其略小于 canvas 一半，避免文字或图案超出边界。
使用方法:
将代码保存为 HTML 文件，然后在浏览器中打开即可看到印章效果。
进一步扩展:
- 添加图片: 可以使用
drawImage()方法在印章中添加图片。 - 更复杂的图形: 可以使用更复杂的路径绘制方法创建更精细的印章图案。
- 用户交互: 可以添加用户交互功能，例如允许用户输入文字、更改颜色等。
- 保存为图片: 可以使用
canvas.toDataURL()方法将 canvas 内容保存为图片。
希望这个改进后的代码能够更好地帮助你创建印章！
标签：canvas,const,制作,ctx,印章,radius,绘制 From： https://www.cnblogs.com/ai888/p/18585570