基于一个小画板谈谈canvas

作者 johansen 日期 2016-12-15
技术小记
基于一个小画板谈谈canvas

基于一个小画板谈谈canvas

上周做了一个项目含有一个签名画板，涉及到canvas绘图，以及手指触摸事件。今天有时间觉得可以总结一下其实其中的知识点还是挺多的，接下来我剖析一下，作为以后的积累吧。

下面给出重要代码片段：

画图代码：

blur img

涉及知识点如下：

1.创建一个canvas元素。

<canvas id="myCanvas" width="400" height="200"></canvas>

2.获取canvas对象上下文,设置画布的画笔色值，线条粗细。

var objCanvas = document.getElementById('myCanvas');
var ctx = objCanvas.getContext("2d");
ctx.fillStyle = rgba(255,255,255,0);
ctx.strokeStyle = "#000";

3.开始绘制路径。

ctx.beginPath();

4.移动画笔起点到某个指定点,例如（20，20）。

ctx.moveTo(20,20)

5.移动画笔到下一个点，例如（20，200）。

ctx.lineTo(20,200)

6.连接起点（20，20）到终点（20，200）。

ctx.stroke()

7.将canvas画布中的图像转化为图片,(base64)

oImg = new Image()
oImg.src = canvas.toDataURL('image/png')
document.body.appendChild(oImg)

对于touch的处理

代码片段如下：
blur

涉及的知识点如下：

1.首先介绍几个触摸事件的类型。

  • touchstart: 当手指触摸屏幕时触发。
  • touchmove: 当手指在屏幕上连续滑动时触发。在这个事件发生期间，阻止默认，可以防止滚动。
  • touchend:当手指从屏幕移开时触发。

2.event事件的属性存在跟踪触摸的属性

  • touches:表示当前跟踪的触摸操作的Touch对象的数组。
  • targetTouches:特定于事件目标的Touch对象数组。
  • changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

Touch对象对应如下属性：

  • clientX：触摸目标在视口中的x坐标
  • clientY：触摸目标在视口中的Y坐标
  • identifier:标识触摸的唯一ID
  • pageX:触摸目标在页面中的x坐标
  • pageY:触摸目标在页面中的Y坐标
  • screenX:触摸目标在屏幕中的x坐标
  • screenY:触摸目标在屏幕中的y坐标
  • target:触摸dom节点目标

上面代码的实现方法：首先设置一个临时点，作为每次画笔移动的起始点，当touch改变时，其对应的坐标点作为画笔移动终点。
起始点，终点坐标需要是相对于画布的坐标，因此需要计算。
伪代码类似：

X = page.X - canvas.offsetLeft;
Y = page.Y - canvas.offsetTop;

利用如此原理就可以实现基本画画功能。demo如下:
画画

FEATURED TAGS
技术小记