利用 html5 的canvas能实现文本上显示原笔迹 首先原笔迹必须是一系列的描点，
这些点的特征的结构是， N个点组成笔划吗N个笔划组成一个字例如
point.js文件
var point = [
[
"175.625:57.632813",
"175.625:60.87802",
"175.625:65.93036",
"175.625:75.62009",
"175.625:90.73721",
"174.68073:109.36893",
"172.44385:129.04236",
"169.52151:150.65607",
"166.54193:171.35876",
"164.75934:190.54639",
"163.53656:206.51831",
"162.58234:223.50244",
"162.11154:239.67389",
"161.5625:253.94531",
"161.25:265.54364",
"161.06082:276.44476",
"160.9375:286.49054",
"160.9375:295.25464",
"161.92334:301.2641",
"162.65527:304.79657",
"164.6875:308.1211",
"164.6875:308.1211"
]
],
[
[
"211.5625:104.50781",
"213.39026:100.660614",
"222.39087:93.247894",
"236.27014:86.43512",
"254.64633:82.34967",
"276.48703:81.54175",
"295.65634:83.87268",
"312.76923:88.45096",
"324.68903:95.496826",
"333.32703:105.38547",
"336.25:119.960175",
"332.37775:141.42047",
"319.29712:169.13025",
"302.69257:197.17572",
"284.8603:222.12512",
"267.18628:243.98682",
"253.20853:259.35828",
"241.8558:270.7683",
"235.25412:276.95227",
"232.24524:280.02155",
"232.68735:281.3437",
"237.26474:281.0901",
"251.44858:276.30164",
"272.3015:267.76147",
"296.75482:256.9486",
"322.9429:245.78064",
"345.88837:236.81409",
"363.77072:229.77716",
"376.38977:225.4638",
"384.45917:223.17517",
"389.21875:222.86719",
"389.21875:222.86719"
]
]
]
之后利用canvas的缩放及横移技术将每个字画上去
<html>
<head>
<script type="text/javascript" src="point.js"></script>
</head>
<body>
广场的正<span style="padding: 1px;border-bottom: 1px solid gainsboro;" class="blank_canvas"><img src="file:///C:/Users/dell/Desktop/umeditor1_2_2-utf8-php/themes/default/images/_03.png" /></span>飘扬着鲜艳的五星红旗！
<span style="padding: 1px;border-bottom: 1px solid gainsboro;" class="blank_canvas"><img src="file:///C:/Users/dell/Desktop/umeditor1_2_2-utf8-php/themes/default/images/_03.png" /></span>
<script type="text/javascript">
//横向
function getLateralOffset(prevWordPoint)
{
var prevWordXPoints = getWordXPoints(prevWordPoint);
var lOffset = parseInt(prevWordXPoints[prevWordXPoints.length - 1])
return lOffset;
}
//获取一个字的所有横向坐标
function getWordXPoints(wordPoint)
{
var wordXPoints = [];
for(var i = 0; i < wordPoint.length; i++)
{
for (var j = 0; j < wordPoint[i].length; j++)
{
wordXPoints.push(wordPoint[i][j].split(":")[0]);
}
}
wordXPoints.sort();
return wordXPoints;
}
function draw(_point, offset, _h, _w,_scale)
{
var _c=$(".blank_canvas")[offset];
$(_c).html('<canvas class="myCanvas" height="' + _h + 'px" width="' + _w + 'px"></canvas>');
var c = document.getElementsByClassName("myCanvas")[offset];
var ctx=c.getContext("2d");
ctx.scale(_scale,_scale);
ctx.beginPath();
var point = {};
var loffset = 0;
for (var k = 0; k < _point.length; k++)
{
//横向移动 应该是从上一个字的横坐标最大位置开始
//获取上个字的横向最大坐标
if (k > 0)
{
loffset = getLateralOffset(_point[k-1]) - getLateralOffset(_point[k-1]) * _scale;
ctx.translate(loffset, 0);
}
//画出word
for (var i = 0; i < _point[k].length; i++)
{
for (var m = 0; m < _point[k][i].length; m++)
{
point = _point[k][i][m].split(":");
if (m == 0)
{
ctx.moveTo(point[0], point[1]);
}else
{
ctx.lineTo(point[0], point[1]);
}
}
}
ctx.strokeStyle="black";
ctx.lineWidth = 10;
ctx.stroke();
}
}
_scale = 0.05;
draw(l30, 0, 18, 900, _scale);
</script>
</body>
</html>
方法：
draw(_point, offset, _h, _w,_scale)
参数说明: _point:所有字的描点的集合 offset当前第几个画布, _h画布高度, _w画布宽度, _scale子题缩放大小
时间： 2024-07-30 03:36:08