一、分享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对所有的路径进行渲染。可以理解为,之前留下的笔迹别人都看不到,只有我们往纸上吹一口气,笔墨才映入眼帘。

    评论:

    1. 假象 回复2015年02月04日 14时56分
      磨者

    2. 假象 回复2015年02月04日 14时58分
      磨者
      怎样实现手写之后保存,然后在发送的呀

        搜索 @假象 回复2018年05月14日 14时01分
        磨者

    3. 磨者 217 回复2015年02月05日 20时41分
      磨者

    4. unknown 回复2015年06月08日 12时30分
      磨者
      不错的文章,内容无与伦比.禁止此消息:nolinkok@163.com
      西门塔尔牛 http://www.xmten.com/

        磨者 922 @unknown 回复2017年01月16日 08时37分
        磨者

    5. 磨者 816 回复2016年02月22日 15时27分
      磨者

    6. 233 回复2016年09月02日 00时46分
      磨者

    7. 磨者 909 回复2016年10月14日 13时25分
      磨者

    8. 磨者 919 回复2016年12月21日 11时08分
      磨者

    9. 回复2016年12月21日 11时09分
      磨者

    10. 磨者 996 回复2018年06月08日 09时54分
      磨者

    11. 我来说两句:

        切换  

      磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

        切换  

      磨途歌随机验证码