安装

在 script 标签加载 Hanzi Writer

最简单选项是直接从 jsdelivr CDN 加载 Hanzi Writer JS 。只需将以下内容放入你的网页的头部:

<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>

你也可以拷贝一个下载 Hanzi Writer javascript 文件:
hanzi-writer.min.js - 生产压缩版 (32 kb, 9kb 压缩后的)
hanzi-writer.js - 开发未压缩版本 (72 kb)

上面的脚本将在脚本加载后使全局 HanziWriter 变量可用。

通过 npm 加载 Hanzi Writer

如果你想在 webpack 或 node.js 中包含 Hanzi Writer，你可以从 npm install hanzi-writer 安装。然后，你可以在你的代码中包含 Hanzi Writer

const HanziWriter = require('hanzi-writer');

注意: 兼容旧浏览器

如果你想在旧版本 IE10/IE11 使用 Hanzi Writer，你需要为 Promise api 提供一个填充工具

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

基本使用

在屏幕上渲染

创建一个新的 HanziWriter 实例需要传入一个目标 div （ID 或者 DOM 引用）,你要渲染的汉字, 配置选项. 下面举例说明一个简单的例子。在 HTML 中声明以下内容:

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

然后, 在 Javascript:

var writer = HanziWriter.create('character-target-div', '我', {
  width: 100,
  height: 100,
  padding: 5
});

你能看到以下结果:

在上面的示例中，width和height是包含字符的框的大小（以像素为单位），padding是字符和框边缘之间的空格，也以像素为单位你也可以配置其他选项，例如角色的颜色。下面是使用不同尺寸和颜色绘制的示例：

var writer = HanziWriter.create('character-target-div', '爽', {
  width: 150,
  height: 150,
  padding: 20,
  strokeColor: '#EE00FF' // pink
});

Hanzi Writer 也支持给汉字的偏旁部首上设置不同的颜色。你可以用 radicalColor 选项来设置来展示的部手颜色. 下面的以草字为例给偏旁部首添加绿色。

var writer = HanziWriter.create('character-target-div', '草', {
  width: 150,
  height: 150,
  padding: 5,
  radicalColor: '#168F16' // green
});

动画

当你创建了一个 Hanzi Writer 实例后，你可以调用 animateCharacter() 方法来让它运动. 在下面的例子中, 点击按钮可以让汉字运动。这个 HTML 代码看起来是下面这个样子:

<div id="character-target-div"></div>
<button id="animate-button">动画</button>

Then, the corresponding javascript:

var writer = HanziWriter.create('character-target-div', '国', {
  width: 100,
  height: 100,
  padding: 5,
  showOutline: true
});
document.getElementById('animate-button').addEventListener('click', function() {
  writer.animateCharacter();
});

你还可以使用动画配置许多选项来控制动画的速度以及角色轮廓是否可见等内容。如果你想在汉字动画播放时展示偏旁部首的颜色你可以给偏旁部首设置颜色。下面是使用不同动画选项制作动画的另一个示例：

var writer = HanziWriter.create('character-target-div', '激', {
  width: 100,
  height: 100,
  padding: 5,
  showOutline: false,
  strokeAnimationSpeed: 5, // 5x normal speed
  delayBetweenStrokes: 10, // milliseconds
  radicalColor: '#337ab7' // blue
});
document.getElementById('animate-button').addEventListener('click', function() {
  writer.animateCharacter();
});

循环动画

循环动画是很常见的一种. 你可以调用 loopCharacterAnimation() 来开启一个循环动画. 这里有几个配置选项 delayBetweenLoops 你可以用来控制动画循环的时间 (默认 2000 ms). 在下面的例子中, 这个汉字会等待 3 秒然后永远重复播放:

var writer = HanziWriter.create('character-target-div', '轮', {
  width: 100,
  height: 100,
  padding: 5,
  delayBetweenLoops: 3000
});

writer.loopCharacterAnimation();

词组动画

你可以在一个汉字动画完成之后来开始运行下一个汉字的动画，在汉字执行下面代码 animateCharacter({ onComplete: function() { ... }}) 当它动画运行完以后，在 onComplete 回调函数运行下一个汉字的动画。如果你准备正在使用 promises，当这个动画完成以后 animateCharacter() 方法也将会返回一个 promise 的 resolve。下面这个例子就是两个汉字按照顺序播放动画，一个汉字动画完成之后的一秒再绘制另一个汉字的动画。这个例子使用第一个汉字完成 onComplete 去触发下一个汉字的开始动画。 HTML 代码:

<div id="character-target-1"></div>
<div id="character-target-2"></div>
<button id="animate-button">Start</button>

javascript 代码:

var char1 = HanziWriter.create('character-target-1', '很', {
  width: 100,
  height: 100,
  padding: 5,
  showCharacter: false
});
var char2 = HanziWriter.create('character-target-2', '爽', {
  width: 100,
  height: 100,
  padding: 5,
  showCharacter: false
});

function chainAnimations() {
  var delayBetweenAnimations = 1000; // milliseconds
  char1.hideCharacter();
  char2.hideCharacter();

  char1.animateCharacter({
    onComplete: function() {
      setTimeout(function() {
        char2.animateCharacter();
      }, delayBetweenAnimations);
    }
  });
}

document.getElementById('animate-button').addEventListener('click', chainAnimations);

测试

开始测试你可以调用 quiz() 方法. 我们用一段设置一个简单测试:

var writer = HanziWriter.create('character-target-div', '测', {
  width: 150,
  height: 150,
  showCharacter: false,
  padding: 5
});
writer.quiz();

尝试绘制上面的汉字测，以了解测验的工作原理。如果你描错了3次它会给你一个提示通过用高亮笔记正确描写汉字。你可以通过将 showHintAfterMisses 选项设置为其他数字来配置此行为，或者设置 showHintAfterMisses: false 来完全禁用它。测验成功完成后，它会短暂闪烁。你可以设置 highlightOnComplete: false 来完全禁用它。下面是一些示例，其中一些选项已更改。下面的示例还设置了 showOutline: false e以使其更具挑战性。

var writer = HanziWriter.create('character-target-div', '鬼', {
  width: 150,
  height: 150,
  showCharacter: false,
  showOutline: false,
  showHintAfterMisses: 1,
  highlightOnComplete: false,
  padding: 5
});
writer.quiz();

尝试在上面绘制鬼字

整合测验

测试本身就是一种很好的实践，如果它们与其余代码进行交互时，它们会变得非常强大。 quiz（）方法可以传递回调，你可以使用它来在测验中或者测验结束发生事件时运行代码，例如获得正确或错误的笔画。 The callbacks are called 调用回调函数 onCorrectStroke, onMistake and onComplete. 这些回调函数由包含有关测验当前状态的信息的对象得到。下面的例子展示怎么整合这些回调函数：

var writer = HanziWriter.create('character-target-div', '码', {
  width: 150,
  height: 150,
  showCharacter: false,
  padding: 5
});
writer.quiz({
  onMistake: function(strokeData) {
    console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum);
    console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far");
    console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz");
    console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character");
  },
  onCorrectStroke: function(strokeData) {
    console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!');
    console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke');
    console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz');
    console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character');
  },
  onComplete: function(summaryData) {
    console.log('You did it! You finished drawing ' + summaryData.character);
    console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz');
  }
});

尝试绘制上面的汉字码, 查看右侧日志输出。

其他方法

除了动画和测验的核心功能，还提供了其他方法来控制汉字的渲染。

writer.setCharacter(newCharacter) 加载一个新的汉字并渲染.
writer.showCharacter() 显示当前隐藏的汉字。
writer.hideCharacter() 隐藏当前显示的汉字。
writer.showOutline() 显示当前隐藏汉字的轮廓。
writer.hideOutline() 隐藏当前汉字显示的轮廓。
writer.updateColor(colorName, newValue) 更改任何颜色选项的值。例如: writer.updateColor('strokeColor', '#AA12CD')
writer.cancelQuiz() 立即取消当前运行的测验

高级用法

加载汉字数据

Hanzi Writer 需要加载笔画渲染数据才能绘制汉字。默认的 Hanzi Writer 数据用 ajax 加载来的 jsdelivr CDN。这种将 Hanzi Writer 嵌入到网站中可能是好的，但是根据你使用 Hanzi Writer 加载汉字数据可能会有更好的方式。例如, 假如你要在构建手机 app 应用中嵌入 Hanzi Writer 加载本地汉字数据是最好的方式，因为汉字数据已经被立刻加载并且不需要请求网络。

有一个名为 hanzi-writer-data 的姐妹仓库，它包含每个单独字符的数据作为单独的 JSON 文件。你可以从服务器托管这些文件，然后通过 AJAX 在 Hanzi Writer 中加载它们，但是你要认为这是合适的。你也可以在 JS 中用 NPM 包裹到你自己的汉字数据中。通过将自定义闭包传递给 charDataLoader 选项来完成加载字符数据。下面例子用 jQuery 来展示:

var writer = HanziWriter.create('target', '我', {
  charDataLoader: function(char, onComplete) {
    $.getJSON("/my/server/" + char + ".json", function(charData) {
      onComplete(charData);
    });
  }
});

repo 还包含 all.json，其中包含1个文件中的所有字符，但这些文件非常大（28mb），因此它们可能不适合生产使用。

If you know in advance which character you'd like to render you can hardcode just the data for that character into the charDataLoader closure. 如果你优先知道要渲染哪个字符，则可以将该字符的数据硬编码到 charDataLoader 闭包中。为此，你可以使用 hanzi-writer-data NPM模块并直接要求内联字符数据。这种技术确保 Hanzi Writer 能够立即呈现汉字，而无需等待 AJAX 请求完成。下面是通过 hanzi-writer-data NPM 模块为汉字人加载汉字数据的示例。首先，通过运行：npm install hanzi-writer-data 确保安装 hanzi-writer-data 模块。

var ren = require('hanzi-writer-data/人');

var writer = HanziWriter.create('target', '人', {
  charDataLoader: function() {
    return ren;
  }
});

如果你希望在加载数据成功或失败收到通知（例如实现加载微调器或者显示错误信息），你可以通过在创建一个 Hanzi Writer 实例的回调函数 onLoadCharDataSuccess 和 onLoadCharDataError 。例如:

var ren = require('hanzi-writer-data/人');

var writer = HanziWriter.create('target', '人', {
  onLoadCharDataSuccess: function(data) {
    console.log('Success!');
  },
  onLoadCharDataError: function(reason) {
    console.log('Oh No! Something went wrong :(');
  }
});

原生汉字 SVG

有时你可能会想渲染 Hanzi writer 汉字数据，但是不需要笔画动画或测验。 Hanzi writer 提供两种静态辅助方法来容易的加载和渲染原生汉字。

Hanzi writer CDN 使用静态方法 HanziWriter.loadCharacterData(character, options = {}) 加载汉字数据。这个方法返回一个含有加载好的汉字数据的 promise ，你也可以传递回调函数 onLoadCharDataSuccess 和 onLoadCharDataError 作为选项。加载的字符数据将与 hanzi-writer-data repo中的字符数据相同，这些数据都是从 makemeahanzi. 中解析出来的。

关于为汉字作者数据渲染SVG路径的最重要部分是必须将字符转换为以所需大小显示在屏幕上，通常使用 <g> 标签。例如，渲染一个大小 128 x 128 的 SVG，这个 SVG 看起来像这样：

<svg>
  <g transform="translate(0, 112.5) scale(0.125, -0.125)">
    <path d="...path from hanzi writer data..."></path>
    <path d="...path from hanzi writer data..."></path>
    <path d="...path from hanzi writer data..."></path>
    ...
  </g>
</svg>

幸运的是，有一个静态方法 HanziWriter.getScalingTransform(width, height, padding = 0) 可以容易的做到。他的方法返回变换数据，你可以在 SVG 中使用它来绘制指定大小的字符。下面示例是加载汉字六的数据并在 ID 为 target 的 div 内渲染大小为150 x 150的字符 SVG：

HanziWriter.loadCharacterData('六').then(function(charData) {
  var target = document.getElementById('target');
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.style.width = '150px';
  svg.style.height = '150px';
  target.appendChild(svg);
  var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');

  // set the transform property on the g element so the character renders at 150x150
  var transformData = HanziWriter.getScalingTransform(150, 150);
  group.setAttributeNS(null, 'transform', transformData.transform);
  svg.appendChild(group);

  charData.strokes.forEach(function(strokePath) {
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttributeNS(null, 'd', strokePath);
    // style the character paths
    path.style.fill = '#555';
    group.appendChild(path);
  });
});

使用原始字符数据为您提供SVG的全部功能，以实现不需要笔画动画或测验的可视化。例如，下面是使用原始字符数据实现汉字是的描边扇形可视化的示例

function renderFanningStrokes(target, strokes) {
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.style.width = '75px';
  svg.style.height = '75px';
  svg.style.border = '1px solid #EEE'
  svg.style.marginRight = '3px'
  target.appendChild(svg);
  var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');

  // set the transform property on the g element so the character renders at 75x75
  var transformData = HanziWriter.getScalingTransform(75, 75);
  group.setAttributeNS(null, 'transform', transformData.transform);
  svg.appendChild(group);

  strokes.forEach(function(strokePath) {
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttributeNS(null, 'd', strokePath);
    // style the character paths
    path.style.fill = '#555';
    group.appendChild(path);
  });
}

HanziWriter.loadCharacterData('是').then(function(charData) {
  var target = document.getElementById('target');
  for (var i = 0; i < charData.strokes.length; i++) {
    var strokesPortion = charData.strokes.slice(0, i + 1);
    renderFanningStrokes(target, strokesPortion);
  }
});

上面的示例使用原始 javascript 浏览器 API 进行 SVG 渲染，但使用库来帮助管理 SVG（如svg.js或raphael.js）的代码更简单。

自定义背景

如果页面上已经有<SVG>或<G>元素，则可以将 Hanzi Writer 实例渲染到该元素而不是使用 DIV。这样可以轻松地在 SVG 中直接添加网格等自定义背景。例如，我们可以在SVG中绘制一个简单的网格，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" id="grid-background-target">
  <line x1="0" y1="0" x2="100" y2="100" stroke="#DDD" />
  <line x1="100" y1="0" x2="0" y2="100" stroke="#DDD" />
  <line x1="50" y1="0" x2="50" y2="100" stroke="#DDD" />
  <line x1="0" y1="50" x2="100" y2="50" stroke="#DDD" />
</svg>

然后，我们可以使用它的 ID 渲染到这个 SVG，就像我们可以使用普通div一样：

var writer = HanziWriter.create('grid-background-target', '酷', {
  width: 100,
  height: 100,
  padding: 5,
});

API

HanziWriter

这是你将与之互动的核心课程。

新建 HanziWriter(element, options)

设置一个新的 HanziWriter 实例指定的 DOM 元素t

element DOM 节点或要渲染的元素的 ID。

options 对象包含其他配置选项。完整选项包括：

showOutline: 布尔值， default true. Controls whether the outline is shown or hidden on the first render.
showCharacter: 布尔值，默认为 true。控制是否在第一个渲染上显示或隐藏轮廓。
width: 数值。画布的宽度。
height: 数值。画布的高度
padding: 数值, 默认 20。画布的汉字和边缘之间的填充
strokeAnimationSpeed: 数值, 默认 1。绘制每个笔划的速度必须大于0。增加此数字可以更快地绘制笔划，减少绘制笔划的速度更慢。
strokeHighlightSpeed: 数值, 默认 20。在测验中给出提示时突出显示每个笔划的速度必须大于0。增加此数字以突出显示更快，减少以突出显示更慢。
strokeFadeDuration: 数值, 默认 400。调用 writer.show() 和 writer.hide() 时在显示和隐藏笔划之间转换的时间（以毫秒为单位）
delayBetweenStrokes: 数值, 默认 1000。动画进行中每个笔画之间的间隔时间（以毫秒为单位）。
delayBetweenLoops: 数值, 默认 2000。循环动画时每个动画循环之间的时间（以毫秒为单位）。
strokeColor: 十六进制字符, 默认 '#555'。绘制每个笔划的颜色。
radicalColor: 十六进制字符, 默认 null。如果存在偏旁部首数据，则在笔划中绘制偏旁部首的颜色。如果没有设置，激光将绘制与其他笔划相同的颜色。
highlightColor: 十六进制字符, 默认 '#AAF'。用于在测验中突出显示的颜色。
outlineColor: 十六进制字符, 默认 '#DDD'。字符轮廓的颜色。
drawingColor: 十六进制字符, 默认 '#333'。测验期间绘制的线条颜色。
drawingWidth: 数值, 默认 4。进行测验时绘制的线条宽度。
showHintAfterMisses: 整数, 默认 3 中风高亮提示之前的未命中数被给予用户。设置为 false 以禁用。创建测验时也可以设置此项。
markStrokeCorrectAfterMisses: integer, default disabled. The number of misses before forcing the stroke to be marked correct. This can also be set when creating a quiz.
quizStartStrokeNum: integer, default 0. This can be set to start the quiz at a stroke other than the first stroke. This can also be set when creating a quiz.
acceptBackwardsStrokes: boolean, default false. Allow stroke to be drawn backwards during quizzing. This can also be set when creating a quiz.
highlightOnComplete: 布尔值, 默认 true。控制当用户完成绘制整个字符时，测验是否会短暂突出显示字符。创建测验时也可以设置此项。
highlightCompleteColor: 十六进制字符, 默认 null。在测验中突出显示字符时使用的颜色。如果未设置，则将使用highlightColor。仅当highlightOnComplete为true时才相关。
charDataLoader: 函数。自定义函数加载字符数据。有关使用的更多信息，请参阅加载字符数据部分。
onLoadCharDataSuccess: 函数。成功加载字符数据时的回调。使用已加载的数据调用此函数。这可以用于实现加载微调器。
onLoadCharDataError: 函数。字符数据加载失败时的回调。无论故障原因来自charDataLoader，都会传递此函数。

实例方法

writer.showCharacter(options = {})

显示当前隐藏的字符。

options 包含其他配置选项的对象。完整选项包括:

onComplete: 函数。显示动画完成时调用。
duration: 数值, 可选。当显示a显示动画应该完成时多长时间调用。如果未提供，则使用strokeFadeDuration。传递0将使操作即时。动画完成。

writer.hideCharacter(options = {})

隐藏当前显示的字符。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。隐藏动画完成时调用。
duration: 数值, 可选。隐藏动画需要多长时间才能完成。如果未提供，则使用strokeFadeDuration 。传递0将使操作立即进行。

writer.showOutline(options = {})

显示当前隐藏的轮廓。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。隐藏动画完成时调用。
duration: 数值，可选。显示动画需要多长时间才能完成。如果未提供，则使用 strokeFadeDuration。传递0将使操作立即进行。

writer.hideOutline(options = {})

隐藏当前显示的轮廓。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。隐藏动画完成时调用。
duration: 数值，可选。隐藏动画需要多长时间才能完成。如果未提供，则使用 strokeFadeDuration。传递0将使操作立即进行。

writer.updateDimensions(options = {})

Update the size of the writer instance

options object containing additional configuration options. Full options include:

width: number, optional, the new width in px
height: number, optional, the new height in px
padding: number, optional, the new padding in px

writer.updateColor(colorName, colorVal, options = {})

颜色设置更新

colorName 字符串。 'strokeColor', 'radicalColor', 'outlineColor', 'highlightColor', 或 'drawingColor'。

colorVal 字符串。 CSS 颜色字符串，如'＃AA9913'或'rgba（255,255,10,0.7）'。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。隐藏动画完成时调用。
duration: 数值，可选。动画完成需要多长时间。如果未提供，则使用 strokeFadeDuration 。传递0将使操作立即进行。

writer.animateCharacter(options = {})

按顺序为汉字的笔划设置动画。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。动画完成时调用。

writer.animateStroke(strokeNum, options = {})

单笔画动画

strokeNum 数值。笔画数做动画，从 0 开始。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。动画完成时调用

writer.highlightStroke(strokeNum, options = {})

单笔突出画动画

strokeNum 数值。笔画数做突出，从 0 开始。

options 包含其他配置选项的对象。完整选项包括：

onComplete: 函数。动画完成时调用

writer.loopCharacterAnimation()

Animate the strokes of the character in order, and then restart the animation after it finishes forever.

writer.pauseAnimation()

Pause any currently running animations.

writer.resumeAnimation()

Resume any animations that were previously paused with pauseAnimation().

writer.setCharacter(character)

按顺序为汉字的笔划设置动画，然后在动画永久完成后重新启动动画。

character 绘制汉字, '你'.

writer.quiz(options)

开始测验。

options 包含其他配置选项的对象。完整选项包括：

onComplete: function(data)。测验完成后调用。使用包含 totalMistakes 的对象调用该函数，该对象是测验期间发生的总错误。
onCorrectStroke: function(data)。当用户正确绘制笔划时调用。使用包含以下内容的对象调用该函数：
- totalMistakes 到目前为止在测验期间犯的总错误。
- strokeNum 当前笔画数。
- mistakesOnStroke 到目前为止用户绘制此笔划所犯的错误数。
- strokesRemaining 测验完成前剩余的笔画数。
- drawnPath 对象包含用户绘制的 pathString ，用于评分的分数。
onMistake: function(data)。当用户绘制笔划时出错。使用包含以下内容的对象调用该函数：
- totalMistakes 到目前为止测试期间错误总数。
- strokeNum 当前笔画数。
- mistakesOnStroke 到目前为止用户绘制的笔划所犯的错误数。
- strokesRemaining 测验完成前剩余的笔画数。
- drawnPath 对象包含用户绘制的 pathString ，用于评分的分数。
showHintAfterMisses: 整数，默认 3。给用户的笔画高亮提示数错误数设置 false 禁用。这也可以在创建编写器实例时设置。
markStrokeCorrectAfterMisses: integer, default disabled. The number of misses before forcing the stroke to be marked correct.
quizStartStrokeNum: integer, default 0. This can be set to start the quiz at a stroke other than the first stroke.
acceptBackwardsStrokes: boolean, default false. Allow stroke to be drawn backwards during quizzing.
leniency: 浮点数, 默认 1.0。这可以设置为使笔划分级或多或少地宽松。越接近于0，测验的评分就越严格。
highlightOnComplete: 布尔值, 默认 true。控制当用户完成绘制整个角色时，测验是否会短暂突出显示角色。这也可以在创建编写器实例时设置。

writer.cancelQuiz()

取消当前测验的进度

类方法

HanziWriter.create(element, character, options)

设置一个新的 HanziWriter 实例指定的 DOM 元素

element DOM 节点或要渲染的元素的ID。

character 绘制汉字， '你'.

options 包含其他配置选项的对象。完整选项包括：

showOutline: 布尔值，默认 true。控制第一次渲染显示还是隐藏轮廓。
showCharacter: 布尔值，默认 true。控制第一次渲染显示还是隐藏汉字。
width: 数值。画布的宽度单位像素）。
height: 数值。画布的高度（单位像素）。
padding: 数值，默认 20。画布的角色和边缘之间的填充（单位像素）。
strokeAnimationSpeed: 数值，默认 1。绘制每个笔划的速度必须大于0.增加此数字可以更快地绘制笔划，减少绘制笔划的速度更慢。
strokeHighlightSpeed: 数值，默认 2。在测验中给出提示时突出显示每个笔划的速度必须大于0.增加此数字以突出显示更快，减少以突出显示更慢。
strokeFadeDuration: 数值，默认 400。调用 writer.show() 和 writer.hide() 时在显示和隐藏笔划之间转换的时间（以毫秒为单位）。
delayBetweenStrokes: 数值，默认 1000。动画时每个笔画之间的时间（以毫秒为单位）。
delayBetweenLoops: 数值，默认 2000。循环动画时每个动画循环之间的时间（以毫秒为单位）。
strokeColor: 十六进制字符, 默认 '#555'。每个笔画的颜色。
radicalColor: 十六进制字符, 默认 null。如果存在偏旁部首数据，则在笔划中绘制偏旁部首的颜色。如果没有设置，激光将绘制与其他笔划相同的颜色。
highlightColor: 十六进制字符, 默认 '#AAF'。用于在测验中突出显示的颜色。
outlineColor: 十六进制字符, 默认 '#DDD'。汉字轮廓颜色。
drawingColor: 十六进制字符, 默认 '#333'。用户测验时绘制线条的颜色。
drawingWidth: 数值，默认 400。用户测验时绘制线条的宽度。
showHintAfterMisses: 整数，默认 3。中风高亮提示之前的未命中数被给予用户。设置为 false 以禁用。创建测验时也可以设置此项。
markStrokeCorrectAfterMisses: integer, default disabled. The number of misses before forcing the stroke to be marked correct. This can also be set when creating a quiz.
quizStartStrokeNum: integer, default 0. This can be set to start the quiz at a stroke other than the first stroke. This can also be set when creating a quiz.
acceptBackwardsStrokes: boolean, default false. Allow stroke to be drawn backwards during quizzing. This can also be set when creating a quiz.
highlightOnComplete: 布尔值，默认 true。控制当用户完成绘制整个角色时，测验是否会短暂突出显示角色。创建测验时也可以设置此项。
highlightCompleteColor: 十六进制字符, 默认 null。在测验中突出显示角色时使用的颜色。如果未设置，则将使用highlightColor。仅当highlightOnComplete为true时才相关。
charDataLoader: 函数。 Custom function to load charater data. See the section on Loading character data for more info on usage. 自定义函数加载字符数据。有关使用的更多信息，请参阅加载字符数据部分。
onLoadCharDataSuccess: 函数。成功加载字符数据时的回调。使用已加载的数据调用此函数。这可以用于实现加载微调器。
onLoadCharDataError: 函数。字符数据加载失败时的回调。无论故障原因来自charDataLoader，都会传递此函数。

HanziWriter.loadCharacterData(character, options = {})

从 Hanzi Writer CDN 加载原始字符数据。加载完成时返回 promise 的 resolves。

character 绘制汉字, '你'。

options 包含其他配置选项的对象。完整选项包括：

charDataLoader: 函数。自定义函数加载字符数据。有关使用的更多信息，请参阅加载字符数据部分。
onLoadCharDataSuccess: 函数。当汉字数据加载成功后回调。这个函数传递已加载的数据。
onLoadCharDataError: 函数。当汉字数据加载失败后回调。无论调用 charDataLoader 出现什么错误都会传递这个函数。

HanziWriter.getScalingTransform(width, height, padding = 0)

返回包含缩放信息的对象，该对象可在 SVG 中渲染原始字符数据时使用。

width 数值，汉字渲染后的宽度（单位像素）。

height 数值，汉字渲染后的高度（单位像素）。

padding 数值，汉字周围额外填充。默认 0.

return value 对象, 包含一下关键字:

x: 数值。翻译中使用的 x 偏移量。
y: 数值。翻译中使用的 y 偏移量。
scale: 数值。变换的比例部分中使用的比例。
transform: 字符串。 SVG 变换字符串，可直接用于<g>元素的transform属性，以在 SVG 中缩放和定位字符路径字符串。