最近重新在看Html5&CSS3的知识，看到canvas的时候，想到了以前在学校学计算机图形学时做过的画图实验，于是想，可以基于html5和css3来做一款画板，经过1天的努力，完成了画板的一些简单的功能，发出来和大家进行分享一下。

这个画板的功能十分的简单，只是实现了随意画，基于橡皮筋的直线、圆、矩形、三角形的画法以及橡皮擦等，线条有数十种宽度和数十条颜色，而且能够下载完成的图画。

截图如下：

最后附上源码：https://github.com/Mafurion/Painter

基于canvas的画板的更多相关文章

  1. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  2. 7个华丽的基于Canvas的HTML5动画

    说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

  3. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  5. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  6. canvas实现画板

    canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...

  7. 基于canvas的仪表盘效果

    概述 基于Canvas实现的仪表盘及效果.通过配置参数,可以任意修改仪表盘颜色,刻度,动画过渡时间等,满足不同场景下的使用.同时使用原生的Canvas,也是学习Canvas的很好的例子. 详细 代码下 ...

  8. 基于canvas实现钟表

    原理说明 1.通过arc方法实现钟表外环: 2.通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针: 3.通过font方法实现在画布上绘制 ...

  9. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

随机推荐

  1. Bootstrap 基本配置与应用

    配置使用 下载文件引用 下载方式:Bootstrap官网 https://www.bootcss.com/ 引用 例: <head> <meta charset="utf- ...

  2. 自动驾驶研究回顾:CVPR 2019摘要

    我们相信开发自动驾驶技术是我们这个时代最大的工程挑战之一,行业和研究团体之间的合作将扮演重要角色.由于这个原因,我们一直在通过参加学术会议,以及最近推出的自动驾驶数据集和基于语义地图的3D对象检测的K ...

  3. FastText的内部机制

    文章来源:https://towardsdatascience.com/fasttext-under-the-hood-11efc57b2b3 译者 | Revolver fasttext是一个被用于 ...

  4. poj - 2096 概率dp (找bug)

    题意:一个人一天只能找1个bug ,这个bug属于s个子系统中的某一个子系统,属于n种bug 中的某一种 ,求 这个人找出n种bug ,并且s个系统都bug的期望 (每个系统的一定可以找出bug) 一 ...

  5. 字节码类库之Javassist

    Javassist优势 – 比反射开销小,性能高.–javassist性能高于反射,低于ASM运行时操作字节码可以让我们实现如下功能:– 动态生成 新的类– 动态改变某个类的结构 ( 添加 / 删除 ...

  6. Python python 五种数据类型--字典

    # 定义一个字典 var1 = {'a':20,'b':40}; var2 = dict(); print(type(var1)) print(type(var2)) # 长度 length = le ...

  7. iOS isEqual

    如何重写 hash 方法 一个合理的 hash 方法要尽量让 hash 表中的元素均匀分布,来保证较高的查询性能. 如果两个对象可以被视为同一个对象,那么他们的 hash 值要一样. mattt 在文 ...

  8. python中如何在一个for循环中遍历两个列表

    `其实就是用zip把两个列表包装起来:  for x, y in zip(list1, list2) 

  9. Linux中的基础

    前言: 这里介绍Linux基础管理.主要包括.Linux中的帮助命令(man.help).系统基础(开机.关机.重启) 一.Linux中的帮助命令. 1.内部命令: #help 命令名 例如:help ...

  10. jvm的类加载机制总结

    类的加载机制分为如下三个阶段:加载,连接,初始化.其中连接又分为三个小阶段:验证,准备,解析. 加载阶段 将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后再堆内创 ...