科迅教育老师直接接听

400-029-09** 400-029-0997 转 23498
查看完整号码
扫码拨号
微信扫码拨号

【科迅干货】HTML5汉子书写笔画特效

内容介绍

今天我们来分享一款模拟汉字书写笔画特效果，我们先看图:

这款效果的代码比较少，我们直接上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>HTML5 汉字书写笔画特效 </title>

 

<script src="js/hanzi-writer.min.js"></script>

<script src="js/polyfill.min.js"></script>

 

</head>

<body>

 

<div id="character-target-div"></div>

<button id="animate-button">重写</button>

<script>

var char = '你好世界',

writer = [];

for(var x = 0; x < char.length; x++) {

writer.push(writeChar(char[x]))

}

 

function writeChar(char) {

return HanziWriter.create('character-target-div', char, {

width: 100,

height: 100,

padding: 5,

showOutline: true

});

}

document.getElementById('animate-button').addEventListener('click', function() {

if(writer.length > 0) {

writer.map(function(w) {

w.animateCharacter()

})

}

});

</script>

</body>

</html>

添加微信咨询
黄老师 @南通科迅教育

获取课程资料+免费试听，体验强师课程！

微信号：ntk******88

立即咨询

“南通科迅教育”是南通科迅计算机技术服务有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：4.5师资：4.5服务：4.5效果：4.5

公示信息

店铺名称：南通科迅教育

单位名称：南通科迅计算机技术服务有限公司

账号名称：ntkxjy（136******78）

所属城市：江苏南通

入驻时长：17年

在线客服：在线聊

相关课程

微信咨询

返回顶部