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

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

利用Canvas实现田字格手写字

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

 

波波
你想把广告放到这里吗?

发表评论

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