描點 原筆跡 web 解析 顯示 技術，筆跡web
利用 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" ] ]]
<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);}//畫出wordfor (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子題縮放大小
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
