代碼如下：
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css" name="文字蓋章">
.seal-content{
width: 300px;
min-height: 60px;
vertical-align: bottom;
word-wrap: break-word;
position: relative;
}
.seal-result{
width: 60px;
height: 60px;
transform: rotate(30deg);
border: solid 2px green;
border-radius: 100%;
text-align: center;
color: green;
font-size: 16px;
font-weight: bold;
line-height: 60px;
right: 5px;
bottom: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8)
}
.seal-result-fail{
border-color: red;
color: red;
}
</style>
<body>
<div class="seal-content">
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
通過的內容
<div class="seal-result">通過</div>
</div>
<div class="seal-content">
不通過的內容
不通過的內容
不通過的內容
不通過的內容
不通過的內容
不通過的內容
不通過的內容
不通過的內容
不通過的內容
不通過的內容
<div class="seal-result seal-result-fail">不通過</div>
</div>
<div class="seal-content">
<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=61180a57a3014c080d3620f76b12696d/d6ca7bcb0a46f21f3635d9adfc246b600d33aecf.jpg" width="300"/>
<div class="seal-result seal-result-fail">不通過</div>
</div>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
<script name="自定義印章">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var text = "XXX專用章";
var companyName = "XXX科技股份有限公司";
// 繪製印章邊框
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();
}
//繪製五角星
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>
<script>
//Canvas學習這一片就夠了
var link = "https://www.runoob.com/w3cnote/html5-canvas-intro.html";
</script>
</html>
效果：
