最近重新在看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. 【codeforces】Educational Codeforces Round 80 D. Minimax Problem——二分+二进制处理

    题目链接 题目大意 有n个维度为m的向量,取其中两个进行合并,合并时每个维度取两者之间的较大者,得到的新的向量中,维度值最小者最大为多少 分析 首先最需要注意的是m的取值,m最大只有8 那么我们可以二 ...

  2. 【Unity游戏开发】跟着马三一起魔改LitJson

    一.引子 在游戏开发中,我们少不了和数据打交道,数据的存储格式可谓是百花齐放,xml.json.csv.bin等等应有尽有.在这其中Json以其小巧轻便.可读性强.兼容性好等优点受到广大程序员的喜爱. ...

  3. Linux基础篇学习——常见系统命令：ls，pwd，cd，date，hwclock，passwd，su，clear，who，w，uname，uptime，last，dmesg，free，ps，top

    ls 显示指定目录中的内容 ls [OPTION]... [FILE]... OPTION -a --all,显示所有文件包括隐藏文件 -l 列出长属性,显示出文件的属性与权限等数据信息 -i  列出 ...

  4. js 的位运算

    api 用途 待更...

  5. h5 js数组Array方法总结

    重新复习数组方法. 一.首先说一下构建一个数组. 1.直接定义一个数组. var a = [1,2,3]; 2.通过Array 对象new一个数组,但Array对象根据传参的不同会返回不同的数组对象. ...

  6. Maven多仓库配置（公司仓库和阿里云仓库）

    Maven多仓库配置(公司仓库和阿里云仓库) 一.之前的配置 之前maven本地的setting.xml的仓库配置,都是直接设置mirror节点 <mirrors> <mirror& ...

  7. JVM中垃圾回收机制如何判断是否死亡？详解引用计数法和可达性分析 ！

    因为热爱,所以坚持. 文章下方有本文参考电子书和视频的下载地址哦~ 这节我们主要讲垃圾收集的一些基本概念,先了解垃圾收集是什么.然后触发条件是什么.最后虚拟机如何判断对象是否死亡. 一.前言   我们 ...

  8. 细数Java项目中用过的配置文件（ini 篇）

    Java 菜鸟,会把可变的配置信息写死在代码里:Java 老鸟,会把可变的配置信息提取到配置文件中.坊间流传这么一句非科学的衡量标准,来评判程序员的级别. 那么,项目中的配置信息,你平时都是怎样来实现 ...

  9. 分享淘宝时间服务器同步时间接口api和苏宁时间服务器接口api

    最近要开发一款抢购秒杀的小工具,需要同步系统时间,这里分享两个时间服务器接口api给大家: 1.淘宝时间服务器时间接口 http://api.m.taobao.com/rest/api3.do?api ...

  10. 携程首页--使用flex布局实现

    携程首页 flex解决了float和postion的遗留问题,对移动端比较友好. 需要水平排列的元素就为其父元素设置display:flex,并为子元素添加flex的值(比例) 布局时可以先从大的页面 ...