canvas 手写毛笔字效果

最新推荐文章于 2024-10-23 16:57:31 发布

原创

最新推荐文章于 2024-10-23 16:57:31 发布 · 1.5w 阅读

14 ·

CC 4.0 BY-SA版权

本文详细介绍了如何利用HTML5的canvas元素，结合JavaScript技术，创建出逼真的手写毛笔字动画效果。从绘制笔触、模拟毛笔的压感和湿度变化等方面进行探讨，让网页上的文字输入体验更具艺术感。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> canvas 手写毛笔字效果 </title>
<style type="text/css">
#canvasId {
	background-color: #FFFFcc;
}
</style>
</head>
<body>

<canvas id="canvasId" width="700" height="500"></canvas><br />
<input type="button" value="clear" onclick="hw.clear();" />

<script type="text/javascript">
function Handwriting(id) {
	this.canvas = document.getElementById(id);
	this.ctx = this.canvas.getContext("2d");
	this.ctx.fillStyle = "rgba(0,0,0,0.25)";
	var _this = this;
	this.canvas.onmousedown = function (e) { _this.downEvent(e)};
	this.canvas.onmousemove = function (e) { _this.moveEvent(e)};
	this.canvas.onmouseup = function (e) { _this.upEvent(e)};
	this.canvas.onmouseout = function (e) { _this.upEvent(e)};
	this.moveFlag = false;
	thi