基于html5的canvas+jQuery实现的手写留言板

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/93/ ]

前几天在一个博客里看到这个手写留言板的功能,感觉太神奇了,网站的留言体验一下就感觉更真实,网站为:虎兔手记​,由于使用的是Html5,而我又不太想捣鼓前端的东西,就只能望梅止渴了.最近清明放假,心里痒痒的,想想,还是搞一个简单的canvas留言板

手写留言板教程:

一、分享jQuery+Canvas实现的手写留言板

二、分享jQuery+Canvas实现的手写留言板


2015年6月27日更新,抱歉让大家久等了。。

留言板完整代码示例,包括怎么保存为图片:https://github.com/mo2g/test/tree/master/canvas


前几天在一个博客里看到这个手写留言板的功能,感觉太神奇了,网站的留言体验一下就感觉更真实,网站为:虎兔手记,由于使用的是Html5,而我又不太想捣鼓前端的东西,就只能望梅止渴了。最近清明放假,心里痒痒的,想想,还是搞一个简单的canvas留言板来玩玩吧。

经过简单分析,就暂时弄了几个基本的画图功能,现在磨途歌的留言板,有两种留言模式:

1)画板模式(新增)

2)文字模式(原有)

画板模式暂时就只支持3种功能:

1)调整画笔粗细

2)调整画笔颜色

3)刷新画板

至于更复杂的画板功能,以后看需求再说吧。

前端技术的发展真是越来越赞了。

评论:

  1. 磨延城 回复2014年04月06日 18时13分
    磨者

      磨者 783 @磨延城 回复2015年09月07日 13时59分
      磨者

      磨者 794 @磨延城 回复2015年10月13日 11时03分
      磨者

      ivn @磨延城 回复2016年07月20日 14时52分
      磨者

      磨者 978 @磨者 783 回复2017年12月05日 18时49分
      磨者

      磨者 985 @ivn 回复2018年04月10日 18时41分
      磨者

      磨者 986 @磨者 783 回复2018年04月13日 15时40分
      磨者

  2. 磨者 113 回复2014年04月18日 22时19分
    磨者

      磨者 236 @磨者 113 回复2015年04月17日 14时31分
      磨者
      怎么弄得呢 大家都能写字,怎么写啊

  3. 磨者 143 回复2014年07月14日 11时17分
    磨者

      磨者 145 @磨者 143 回复2014年07月17日 16时24分
      磨者

      磨者 176 @磨者 143 回复2014年09月18日 16时24分
      磨者
      非常感谢,期待中
      我觉得这是一个很好地创意

  4. Caoronglai 回复2014年07月29日 14时32分
    磨者
    Hhhhhhjjjj

      pedoc @Caoronglai 回复2014年09月06日 14时09分
      磨者
      你好,能不能给写个文章说明一下怎么实现的呢?或者开放您的插件,非常感谢

      磨延城 @pedoc 回复2014年09月18日 16时19分

      恩,前一段时间想写来着,事情一多就给忘了
      等空闲了,我会写个教程出来

  5. 回复2014年07月29日 14时33分
    磨者

  6. 磨者 161 回复2014年08月14日 22时09分
    磨者

  7. 磨者 174 回复2014年09月15日 23时52分
    磨者

      程序那些事 @磨者 174 回复2018年04月29日 21时26分
      磨者

  8. web前端开发 回复2014年12月08日 10时46分
    磨者

  9. 磨者 200 回复2014年12月29日 16时25分
    磨者

  10. 磨者 203 回复2015年01月12日 09时35分
    磨者

      磨者 967 @磨者 203 回复2017年08月29日 14时53分
      磨者

  11. 上一页123456下一页 共6页

    我来说两句:

      切换  

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

      切换  

    磨途歌随机验证码