HTML5 Canvas画印章效果代码

更新时间：2026-03-29 03:16:05作者：yezheng

这篇文章主要为大家介绍了HTML5 Canvas画印章效果代码,非常简单实用,需要的朋友可以参考下

具体代码如下：

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas画印章</title>

</head>

<body>

var canvas = document.getElementById("canvas");

var context = canvas.getContext('2d');

var text = "XXX专用章";

var companyName = "浙江网络科技股份有限公司";

// 绘制印章边框

var width = canvas.width / 2;

var height = canvas.height / 2;

context.lineWidth = 5;

context.strokeStyle = "#f00";

context.beginPath();

context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径

context.stroke();

//画五角星

create5star(context,width,height,25,"#f00",0);

// 绘制印章名称

context.font = '20px 宋体';

context.textBaseline = 'middle';//设置文本的垂直对齐方式

context.textAlign = 'center'; //设置文本的水平对对齐方式

context.lineWidth=1;

context.strokeStyle = '#f00';

context.strokeText(text,width,height+60);

// 绘制印章单位

context.translate(width,height);// 平移到此位置,

context.font = '23px 宋体'

var count = companyName.length;// 字数

var angle = 4*Math.PI/(3*(count - 1));// 字间角度

var chars = companyName.split("");

var c;

for (var i = 0; i < count; i++) {

c = chars[i];// 需要绘制的字符

if (i == 0) {

context.rotate(5 * Math.PI / 6);

} else{

context.rotate(angle);

}

context.save();

context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离

context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴

context.strokeText(c, 0, 0);// 此点为字的中心点

context.restore();

}

//绘制五角星

/**

* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上

* rotate:绕对称轴旋转rotate弧度

function create5star(context, sx, sy, radius, color, rotato) {

context.save();

context.fillStyle = color;

context.translate(sx, sy);//移动坐标原点

context.rotate(Math.PI + rotato);//旋转

context.beginPath();//创建路径

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 5 * 4;

for (var i = 0; i < 5; i++) {//画五角星的五条边

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(x * radius, y * radius);

}

context.closePath();

context.stroke();

context.fill();

context.restore();

}

</script>

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas画印章</title>

</head>

<body>

var canvas = document.getElementById("canvas");

var context = canvas.getContext('2d');

var text = "XXX专用章";

var companyName = "浙江网络科技股份有限公司";

// 绘制印章边框

var width = canvas.width / 2;

var height = canvas.height / 2;

context.lineWidth = 5;

context.strokeStyle = "#f00";

context.beginPath();

context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径

context.stroke();

//画五角星

create5star(context,width,height,25,"#f00",0);

// 绘制印章名称

context.font = '20px 宋体';

context.textBaseline = 'middle';//设置文本的垂直对齐方式

context.textAlign = 'center'; //设置文本的水平对对齐方式

context.lineWidth=1;

context.strokeStyle = '#f00';

context.strokeText(text,width,height+60);

// 绘制印章单位

context.translate(width,height);// 平移到此位置,

context.font = '23px 宋体'

var count = companyName.length;// 字数

var angle = 4*Math.PI/(3*(count - 1));// 字间角度

var chars = companyName.split("");

var c;

for (var i = 0; i < count; i++) {

c = chars[i];// 需要绘制的字符

if (i == 0) {

context.rotate(5 * Math.PI / 6);

} else{

context.rotate(angle);

}

context.save();

context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离

context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴

context.strokeText(c, 0, 0);// 此点为字的中心点

context.restore();

}

//绘制五角星

/**

* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上

* rotate:绕对称轴旋转rotate弧度

function create5star(context, sx, sy, radius, color, rotato) {

context.save();

context.fillStyle = color;

context.translate(sx, sy);//移动坐标原点

context.rotate(Math.PI + rotato);//旋转

context.beginPath();//创建路径

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 5 * 4;

for (var i = 0; i < 5; i++) {//画五角星的五条边

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(x * radius, y * radius);

}

context.closePath();

context.stroke();

context.fill();

context.restore();

}

</script>