Skip to content

Instantly share code, notes, and snippets.

@hanxi

hanxi/hanzi.html

Last active March 8, 2022 05:52
Show Gist options
  • Save hanxi/55ac4d02d0713802268311efac4336a4 to your computer and use it in GitHub Desktop.
Save hanxi/55ac4d02d0713802268311efac4336a4 to your computer and use it in GitHub Desktop.
Download ZIP
汉字打印
Raw
hanzi.html
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box {
border: 1px solid rgb(235, 235, 235);
width: 60px;
margin-right: 5px;
margin-top: 15px;
display: inline-flex;
}
</style>
</head>
<body>
<div id="content">
</div>
<script>
var s = '都是勇敢的 你额头的伤口你的不同你犯的错 都不必隐藏 你破旧的玩偶你的面具你的自我 他们说要带着光驯服每一头怪兽 他们说要缝好你的伤没有人爱小丑 为何孤独不可光荣 人只有不完美值得歌颂 谁说污泥满身的不算英雄 爱你孤身走暗巷 爱你不跪的模样 爱你对峙过绝望 不肯哭一场 爱你破烂的衣裳 却敢堵命运的枪 爱你和我那么像 缺口都一样 去吗 配吗 这褴褛的披风 战吗 战啊 以最卑微的梦 致那黑夜中的呜咽与怒吼 谁说站在光里的才算英雄 他们说要戒了你的狂 就像擦掉了污垢 他们说要顺台阶而上而代价是低头 那就让我不可乘风 你一样骄傲著那种孤勇 谁说对弈平凡的不算英雄 爱你孤身走暗巷 爱你不跪的模样 爱你对峙过绝望 不肯哭一场 爱你破烂的衣裳 却敢堵命运的枪 爱你和我那么像 缺口都一样 去吗 配吗 这褴褛的披风 战吗 战啊 以最卑微的梦 致那黑夜中的呜咽与怒吼 谁说站在光里的才算英雄 你的斑驳与众不同 你的沉默震耳欲聋 爱你孤身走暗巷 爱你不跪的模样 爱你对峙过绝望 不肯哭一场 爱你来自于蛮荒 一生不借谁的光 你将造你的城邦 在废墟之上 去吗 去啊 以最卑微的梦 战吗 战啊 以最孤高的梦 致那黑夜中的呜咽与怒吼 谁说站在光里的才算英雄';
for (var i = 0; i < s.length; i++) {
var z = s.charAt(i);
var id = "svg" + i;
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" id="' + id + '"><line x1="0" y1="0" x2="60" y2="60" stroke="rgb(235,235,235)" /><line x1="60" y1="0" x2="0" y2="60" stroke="rgb(235,235,235)" /><line x1="30" y1="0" x2="30" y2="60" stroke="rgb(235,235,235)" /><line x1="0" y1="30" x2="60" y2="30" stroke="rgb(235,235,235)" /></svg>'
var box = $('<div class="box"></div>').append(svg);
$("#content").append(box);
var writer = HanziWriter.create(id, z, {
width: 60,
height: 60,
padding: 5,
});
}
</script>
</body>
Raw
hanzishow.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>笔画动画</title>
<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/cnchar/cnchar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"></script>
<style>
.button {
border: none;
border-radius: 5px;
background: var(--accent);
font-size: 1rem;
color: var(--bg);
padding: 0.7rem 0.9rem;
margin: 0.5rem 0;
}
.button:hover,
.button:focus {
filter: brightness(1.4);
cursor: pointer;
}
.box {
border: 1px solid rgb(235, 235, 235);
width: 100px;
margin-right: 5px;
margin-top: 15px;
}
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: col;
justify-content: space-around;
}
#pinyin {
font-size: 1.3rem;
}
</style>
</head>
<body>
<header>
<h1>笔画动画</h1>
<p>输入汉字看笔画</p>
</header>
<main>
<div class="container">
<label for="name">输入一个汉字:</label>
<input type="text" id="name" name="name" maxlength="1" size="5" autocomplete="off">
<button id="animate-button" class="button">查看</button>
<div class="row" id="pinyin">
</div>
<div class="row">
<div id="drawAnimation">
</div>
</div>
<div class="row">
<div id="drawStroke">
</div>
</div>
</div>
</main>
<footer>
<p>作者：涵曦</p>
</footer>
<script>
document.getElementById('animate-button').addEventListener('click', function () {
var hanzi = document.getElementById('name').value;
cnchar.draw(hanzi, {
el: '#drawAnimation',
type: cnchar.draw.TYPE.ANIMATION,
animation: {
loopAnimate: true
}
})
cnchar.draw(hanzi, {
el: '#drawStroke',
type: cnchar.draw.TYPE.STROKE
})
var spells = cnchar.spell(hanzi, "low", "tone", "poly");
var spellarr = spells.replace(/[\(\)]/g, "").split('|');
document.getElementById('pinyin').innerHTML = '';
for (var i = 0; i < spellarr.length; i++) {
var spell = spellarr[i];
var pinyintext = document.createElement("div");
pinyintext.innerHTML = '<span>' + spell + '</span><i id="play' + i + '" i class="fa fa-play-circle"></i>';
document.getElementById('pinyin').appendChild(pinyintext);
var info = cnchar.spellInfo(spell);
var pinyin = info.spell + info.tone;
console.log(pinyin);
pinyinurl = "https://www.mdbg.net/chinese/rsc/audio/voice_pinyin_pz/" + pinyin + ".mp3";
console.log(pinyinurl);
let audio = document.createElement('audio');
audio.id = "audio"+i;
audio.src = pinyinurl;
pinyintext.appendChild(audio);
document.getElementById("play"+i).onclick = function () {
audio.play();
};
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment