最近重新在看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. 使用docker构建双主mysql

    我们有的时候需要双主mysql, 这样无论哪个数据库出现了问题的话都可以继续使用数据库.把两个数据库挂到一个代理上面,这样哪个服务出问题了,另外一个就可以继续服务了.当然本文不是主要谈代理的,所以这个 ...

  2. （一）iview的校验TypeError: Cannot read property 'validateField' of undefined"

    一.问题描述 我是在自己封装了一个地址级联选择,然后想要每次改变了其中数据的时候,就进行一次单独校验,所以用到了iview对部分表单字段进行校验的方法validateField.其实一开始使用的时候是 ...

  3. 在Keras中可视化LSTM

    作者|Praneet Bomma 编译|VK 来源|https://towardsdatascience.com/visualising-lstm-activations-in-keras-b5020 ...

  4. swagger2 接口文档

    1,maven: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  5. POJ旅行商问题——解题报告

    旅行商问题 总时间限制: 1000ms 内存限制: 65536kB 描述 某国家有n(1<=n<=10)座城市,给定任意两座城市间距离(不超过1000的非负整数).一个旅行商人希望访问每座 ...

  6. FileReader 和Blob File文件对象(附formData初始化方法)；

    一.FileReader为读取文件对象 . api  地址   相关demo 现在只讨论  readAsArrayBuffer,readAsBinaryString,readAsDataURL,rea ...

  7. 使用Git pull文件时，出现"error: RPC failed; curl 18 transfer closed with outstanding read data remaining"

    error: RPC failed; curl transfer closed with outstanding read data remaining fatal: The remote end h ...

  8. 模块 shutil_zipfile_tarfile压缩解压

    shutil_zipfile_tarfile压缩解压 shutil 模块 高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length]) #将 ...

  9. I - 动物狂想曲 HDU - 6252(差分约束)

    I - 动物狂想曲 HDU - 6252 雷格西桑和路易桑是好朋友,在同一家公司工作.他们总是一起乘地铁去上班.他们的路线上有N个地铁站,编号从1到N.1站是他们的家,N站是公司. 有一天,雷格西桑起 ...

  10. SSM项目启动的三种方式

    SSM整合Maven项目的三种启动方式 项目部署如图: 1.从父工程的的tomcat插件中直接启动 2.从web子工程的tomcat插件中启动,(需要先执行父工程的install) 如果没有执行父工程 ...