<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas畫印章</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<lable style="display: inline-block;margin:50px;font-size: 18px;">印章文字:
<input type="text" id="textname" style="height: 30px;width: 200px;" value="蘇州領拓天成資訊技術有限公司" />
</lable>
<lable style="display: inline-block;margin:50px;font-size: 18px;">X:
<input type="text" id="left" style="height: 30px;width: 200px;" value="500" />
</lable>
<lable style="display: inline-block;margin:50px;font-size: 18px;">Y:
<input type="text" id="top" style="height: 30px;width: 200px;" value="100" />
</lable>
<input type="button" id="changename" value="修改" />
<div>
<div>4月30日，“農民将軍”甘祖昌的夫人、96歲的全國道德模範龔全珍，坐在江西萍鄉家裡向記者朗聲複述這封她寄往北京的書信。 這是春天最好的月份，這片她奉獻了一生的土地，這些傳頌着她名字的街巷，那些她鐘愛一生的書卷，一切都重新在眼前清晰起來。 17天前，她剛剛經曆了一場稱得上世界級難度的眼科手術。 16天前，她揭下了紗布，重獲光明。
</div>
<div>1957年，作為西北大學教育系畢業的知識女性，她跟随丈夫甘祖昌将軍回到江西老家建設農村，從此将一生奉獻給了山鄉教育。赤腳下田、荷鋤上山，修路建橋、扶貧助學，與村民悲歡與共、對孩子竭盡所能。“做得太有限”“不要麻煩組織”，正是她常挂在嘴邊的話。
</div>
<canvas id="canvas" width="200" height="200" style="position: absolute;"></canvas>
</div>
<script>
// canvas繪制圖像的原點是canvas畫布的左上角
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var textstring = '領雲監制';
$(function() {
draw(textstring);
});
$('#changename').click(function() {
draw(textstring);
});
function draw(textstring) {
var left = $('#left').val();
var top = $('#top').val();
$('#canvas').css('top', top + 'px').css('left', left + 'px').css('position', 'absolute');
drawText($("#textname").val(), textstring);
}
// 繪制圓形印章
function drawText(companyName, textstring) {
// 清除畫布法一
context.globalAlpha = 1;
context.fillStyle = 'rgba(255, 255, 255, 0)';
context.fillRect(0, 0, $('#canvas').width(), $('#canvas').height());
var text = textstring;
// 繪制印章邊框
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 = 'normal bold 12px 宋體';
context.textBaseline = 'middle'; //設定文本的垂直對齊方式
context.textAlign = 'center'; //設定文本的水準對對齊方式
context.lineWidth = 1;
context.fillStyle = '#f00';
context.save();
context.translate(width, height + 60); // 平移到此位置,
context.scale(1, 2); //伸縮要先把遠點平移到要寫字的位置，然後在繪制文字
context.fillText(text, 0, 0); //原點已經移動
context.restore();
// 繪制印章機關
context.translate(width, height); // 平移到此位置,
context.font = 'normal bold 20px 宋體';
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]; // 需要繪制的字元
//繞canvas的畫布圓心旋轉
if(i == 0) {
context.rotate(5 * Math.PI / 6);
} else {
context.rotate(angle);
}
context.save();
context.translate(66, 0); // 平移到此位置,此時字和x軸垂直，公司名稱和最外圈的距離
context.rotate(Math.PI / 2); // 旋轉90度,讓字平行于x軸
context.scale(1, 2); //伸縮畫布，實作文字的拉長
context.fillText(c, 0, 0); // 此點為字的中心點
context.restore();
}
// 設定畫布為最初的位置為原點，旋轉回平衡的原位置，用于清除畫布
context.rotate(-Math.PI / 6);
context.translate(0 - canvas.width / 2, 0 - canvas.height / 2);
//繪制五角星
/**
* 建立一個五角星形狀. 該五角星的中心坐标為(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>
</body>
</html>
![APP強制更新(uni-app)項目要求：解決思路：效果圖：具體代碼：總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)