一、分享jQuery+Canvas实现的手写留言板
[文章作者：磨延城 转载请注明原文出处： https://mo2g.com/view/134/ ]
前一段时间,写了一篇文章,基于html5的canvas+jQuery实现的手写留言板,由于时间关系,就只是简单的介绍了一下相关功能,而没有给出实现方法.现在有时间,就把手写留言板的实现过程跟大家分享一下.
前一段时间，写了一篇文章，基于html5的canvas+jQuery实现的手写留言板，由于时间关系，就只是简单的介绍了一下相关功能，而没有给出实现方法。现在有时间，就把手写留言板的实现过程跟大家分享一下。
这一篇文章，先简单讲解一下如何在canvas画板上画出一条红色的斜线，或许能帮助大家了解canvas画板的实现。
<!DOCTYPE html>
<html>
<head>
<title>画板测试</title>
</head>
<body>
<canvas id="can" width="800" height="600">Canvas画板</canvas>
<script>
var can = document.getElementById('can'),//获取canvas元素
pan = can.getContext("2d");//获取2D图像API接口
pan.strokeStyle = "#ff0000";//设置画笔颜色
pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
pan.lineWidth = 9;//设置画笔粗细
pan.moveTo(0,0);
pan.lineTo(800,600);
pan.closePath();
pan.stroke();
</script>
</body>
</html>1）通过html5的canvas元素，创建一个宽800，高600的画板。
a）默认情况下，canvas在浏览器中看不到，因为它是透明的
b）最好不要用css样式定义canvas的宽度和高度，而直接用width、height定义
c）如果浏览器不支持canvas时，canvas标签中的文字就会显示出来了
2）使用js调用canvas的2D图形API接口
a）moveTo(x,y)：设定新路径的起始坐标。简单理解，我们在写毛笔字的时候，首先会把毛笔抬到指定的位置，然后才把毛笔放在纸上，moveTo(x,y)就是用来确定我们落笔的位置。
b）lineTo(x,y)：如果没有设定起始坐标，则等同于moveTo(x,y)。反之，就根据两个点坐标建立直线，并保存到路径中。落笔之后，只要移动毛笔，就会在纸上留下笔迹。
c）closePath()：关闭当前打开的路径。可以理解为，把毛笔抬起来。
d）stroke()：使用lineWidth、lineCap、lineJoin以及strokeStyle对所有的路径进行渲染。可以理解为，之前留下的笔迹别人都看不到，只有我们往纸上吹一口气，笔墨才映入眼帘。
我来说两句: