H5源码：利用Canvas实现田字格手写汉字

在开发一款学习的APP中，遇到一个需求就是实现孩子在田字格中练习写字。整体页面采用Canvas绘图实现，源码如下：

利用Canvas实现田字格手写字

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>写字</title>
  7.   <style type="text/css">
  8.   .canvas {
  9.     margin: 100px auto 0;
  10.     display: block;
  11.   }
  13.   #clear,
  14.   #clear1 {
  15.     display: block;
  16.     padding: 5px 10px;
  17.     width: 50px;
  18.     height: 40px;
  19.     line-height: 40px;
  20.     border: 1px solid #eee;
  21.     background: #e1e1e1;
  22.     border-radius: 10px;
  23.     text-align: center;
  24.     margin: 20px auto;
  25.     cursor: pointer;
  26.   }
  27.   </style>
  28. </head>
  30. <body>
  31.   <canvas id="canvas" class="canvas">
  32.     您的浏览器不支持canvas技术,请升级浏览器!
  33.   </canvas>
  34.   <span id="clear">清空</span>
  35. </body>
  37. </html>
  38. <script type="text/javascript">
  39. function WriteFont(id, options) {
  40.   var self = this;
  41.   this.canvas = document.getElementById(id);
  42.   var obj = {
  43.     canvas: this.canvas,
  44.     context: this.canvas.getContext("2d"),
  45.     isWrite: false,
  46.     lastWriteTime: -1,
  47.     lastWriteSpeed: 0,
  48.     lastWriteWidth: 0,
  49.     canvasWidth: 600,
  50.     canvasHeight: 600,
  51.     isShowBorder: true,
  52.     bgColor: '#fff',
  53.     borderWidth: 6,
  54.     borderColor: 'red',
  55.     lastPoint: {},
  56.     writeWidth: 6,
  57.     maxWriteWidth: 30,
  58.     minWriteWidth: 1,
  59.     writeColor: '#000'
  60.   }
  62.   for (var name in options) {
  63.     obj[name] = options[name];
  64.   }
  65.   this.setLineWidth = function() {
  66.     var nowTime = new Date().getTime();
  67.     var diffTime = nowTime - obj.lastWriteTime;
  68.     obj.lastWriteTime = nowTime;
  69.     var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
  70.     if (returnNum < obj.minWriteWidth) {
  71.       returnNum = obj.minWriteWidth;
  72.     } else if (returnNum > obj.maxWriteWidth) {
  73.       returnNum = obj.maxWriteWidth;
  74.     }
  75.     returnNum = returnNum.toFixed(2);
  76.     obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
  77.   }
  79.   this.writing = function(point) {
  81.     obj.context.beginPath();
  82.     obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
  83.     obj.context.lineTo(point.x, point.y);
  84.     self.setLineWidth();
  85.     obj.context.stroke();
  86.     obj.lastPoint = point;
  87.     obj.context.closePath();
  88.   }
  90.   this.writeContextStyle = function() {
  91.     obj.context.beginPath();
  92.     obj.context.strokeStyle = obj.writeColor;
  93.     obj.context.lineCap = 'round';
  94.     obj.context.lineJoin = "round";
  95.   }
  97.   this.writeBegin = function(point) {
  98.     obj.isWrite = true;
  99.     obj.lastWriteTime = new Date().getTime();
  100.     obj.lastPoint = point;
  101.     self.writeContextStyle();
  102.   }
  104.   this.writeEnd = function() {
  106.     obj.isWrite = false;
  107.   }
  109.   this.canvasClear = function() {
  110.     obj.context.save();
  111.     obj.context.strokeStyle = '#fff';
  112.     obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
  113.     if (obj.isShowBorder) {
  114.       console.log('show border');
  115.       obj.context.beginPath();
  116.       var size = obj.borderWidth / 2;
  117.       //画外面的框
  118.       obj.context.moveTo(size, size);
  119.       obj.context.lineTo(obj.canvasWidth - size, size);
  120.       obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
  121.       obj.context.lineTo(size, obj.canvasHeight - size);
  122.       obj.context.closePath();
  123.       obj.context.lineWidth = obj.borderWidth;
  124.       obj.context.strokeStyle = obj.borderColor;
  125.       obj.context.stroke();
  126.       //画里面的框
  127.       obj.context.moveTo(0, 0);
  128.       obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
  129.       obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
  130.       obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
  131.       obj.context.lineTo(0, obj.canvasHeight / 2);
  132.       obj.context.lineTo(0, obj.canvasHeight);
  133.       obj.context.lineTo(obj.canvasWidth, 0);
  134.       obj.context.lineTo(obj.canvasWidth / 2, 0);
  135.       obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
  136.       obj.context.stroke();
  138.     }
  139.     obj.context.restore();
  140.   }
  142.   this.canvasInit = function() {
  143.     this.canvas.width = obj.canvasWidth;
  144.     this.canvas.height = obj.canvasHeight;
  145.   }
  146.   this.canvas.addEventListener('mousedown', function(e) {
  147.     var point = {
  148.       x: e.offsetX || e.clientX,
  149.       y: e.offsetY || e.clientY
  150.     };
  151.     self.writeBegin(point);
  152.   });
  153.   this.canvas.addEventListener('mouseup', function(e) {
  154.     var point = {
  155.       x: e.offsetX,
  156.       y: e.offsetY
  157.     };
  158.     self.writeEnd(point);
  159.   });
  160.   this.canvas.addEventListener('mouseleave', function(e) {
  161.     var point = {
  162.       x: e.offsetX,
  163.       y: e.offsetY
  164.     };
  165.     self.writeEnd(point);
  166.   });
  167.   this.canvas.addEventListener('mousemove', function(e) {
  168.     if (obj.isWrite) {
  169.       var point = {
  170.         x: e.offsetX,
  171.         y: e.offsetY
  172.       };
  174.       self.writing(point);
  175.     }
  176.   });
  177.   this.canvasInit();
  178.   this.canvasClear();
  180.   this.option = obj;
  181.   obj.control = {
  182.     clearCanvas: self.canvasClear
  183.   };
  184. }
  185. var writeCanvas = new WriteFont('canvas', {
  186.   borderWidth: 10,
  187.   borderColor: '#ff6666'
  188. });
  191. document.getElementById('clear').onclick = function() {
  192.   writeCanvas.option.control.clearCanvas();
  193. }
  194. document.getElementById('clear1').onclick = function() {
  195.   writeCanvas1.option.control.clearCanvas();
  196. }
  197. </script>

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！