最近重新在看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. Cesium 源码笔记[1] Viewer模块实例化的大致过程

    我原本想写日记的,但是不太现实. 源码下载 源码可以从源码包和发行包中的Source目录中获取. Cesium的模块化机制从1.63版本开始,由原来的RequireJs变为ES6.但有可能是原先设计耦 ...

  2. Anomaly Detection-异常检测算法（Coursera-Ng-ML课程）

    现实生活中有许多需要提前预防一些异常问题出现的情况,例如在飞机起飞前,对飞机各部分进行评估,看发动机等各个零件是否性能正常,若有潜在的问题(可能出现异常情况),则需要及时检修或更换. 那么我们如何去评 ...

  3. Jmeter接口测试之案例实战（十一）

    在前面的知识体系中详细的介绍了Jmeter测试工具在接口自动化测试中的基础知识,那么今天更新的文章主要是对昨晚的上课内容做个总结. 首先来看Jmeter测试工具在图片上传中的案例应用.首先结合互联网产 ...

  4. 将图片base64格式转换为file对象并读取（两种方式读取）

    两种方式读取,一种URL.createObjectURL,另一种fileReader   var base64 = ` data:image/jpeg;base64,/9j/4AAQSkZJRgABA ...

  5. YII2自动初始化脚本

    #!/usr/bin/expect spawn ./init expect "Which environment do you want the application to be init ...

  6. 关于 JavaScript 的 精度丢失 与 近似舍入

    一.背景 最近做 dashborad 图表时,涉及计算小数且四舍五入精确到 N 位.后发现 js 算出来的结果跟我预想的不一样,看来这里面并不简单-- 二.JS 与 精度 1.精度处理 首先明确两点: ...

  7. 批量生成sql语句,难得

    在工作我们常常要批量生成sql文件,因为业务部门经常给我们的是excel文件,根据我的经验,推荐两种批量生成sql文件方式 1.excel批量生成sql ,sql语句如下 INSERT INTO Ta ...

  8. tensorflow编程学习路线及笔记

    话不多说,直接上图! 关于人工智能算法学习思路,欢迎浏览我的另一篇随笔:如果你想开始学习算法,不妨先了解人工智能有哪些方向? 关于python编程学习路线及笔记,欢迎浏览我的另一篇随笔:python编 ...

  9. SpringBoot系列之学习教程汇总

    对应SpringBoot系列博客专栏,例子代码,本博客不定时更新 一.配置篇 SpringBoot系列之@PropertySource读取yaml文件     >> source down ...

  10. Redis 笔记（二）—— STRING 常用命令

    字符串中不仅仅可以存储字符串,它可以存储以下 3 中类型的值 : 字符串 整数 浮点数 Redis 可以对字符串进行截取等相关操作,对整数.浮点数进行增减操作. 自增自减命令 命令 用例和描述 INC ...