最近重新在看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. 从ISTIO熔断说起-轻舟网关熔断

    最近大家经常被熔断洗脑,股市的动荡,让熔断再次出现在大家眼前.微服务中的熔断即服务提供方在一定时间内,因为访问压力太大或依赖异常等原因,而出现异常返回或慢响应,熔断即停止该服务的访问,防止发生雪崩效应 ...

  2. MFC之创建多级动态菜单

    一开始以我是这样做的,结果是错误的: 这段代码第一次点击时,会在第6个位置创建MFC菜单,我本以为再次点击,menu->GetSubMenu(5)返回的值就不会为空了,但事实是它返回了NULL, ...

  3. Visdom 介绍 | 一

    用于创建,组织和共享实时丰富数据可视化的灵活工具.支持Python. 概述 概念 设置 用法 API 待办事项 贡献 概述 Visdom旨在促进(远程)数据的可视化,重点是支持科学实验. 为你自己和你 ...

  4. webpack配置打包vue文件

    1.首先全局安装node,和npm.检查是否安装成功 2.新建一个文件下,进入该文件夹. 前先执行 npm init -y 然后就会在文件夹下出现一个package.json文件 然后执行 npm i ...

  5. HDU - 1166 树状数组模板（线段树也写了一遍）

    题意: 汉语题就不说题意了,用到单点修改和区间查询(树状数组和线段树都可以) 思路: 树状数组的单点查询,单点修改和区间查询. 树状数组是巧妙运用二进制的规律建树,建树就相当于单点修改.这里面用到一个 ...

  6. 初学jQuery使用方法

    jQuery引用 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></scri ...

  7. coding++：java-HashMap的负载因子为什么默认是0.75？

    本篇文章基于JDK1.8,特在此说明 1):负载因子的作用 负载因子是和扩容机制有关的,意思是如果当前容器的容量,达到了我们设定的最大值,就要开始执行扩容操作.举个例子来解释,避免小白听不懂: 比如说 ...

  8. HashCode()与equals()深入理解

    1.hashCode()和equals()方法都是Object类提供的方法, hashCode()返回该对象的哈希码值,该值通常是一个由该对象的内部地址转换而来的int型整数, Object的equa ...

  9. Celery动态添加定时任务

    背景 业务需求:用户可创建多个多人任务,需要在任务截止时间前一天提醒所有参与者 技术选型: Celery:分布式任务队列.实现异步与定时 django-celery-beat:实现动态添加定时任务,即 ...

  10. XSS之绕过WAF总结

    来源<XSS跨站脚本攻击剖析与防御>&<WEB前端技术揭秘> 一.一般测试方法 步骤: 0.总则:见框就插 1.在输入框随便输入一些简单的字符,如 aaa,方便后续查找 ...