截图：

Demo:Demo

上代码：.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

<style>

	*{ margin:0;padding:0; }

	body{ }

	canvas{ background-color: #fff;border:1px solid #ccc;}

	ul,li{ padding:0;margin:0; list-style:none;}

	.fl{ float: left;}

	.warp{ height:600px;}

	.canvas{ float: left;}

	.left{ margin-left:620px;}

	.show-img{ float:left;margin-left:10px;width:600px;height:600px; border:1px solid #ccc;}

	.detail-main{ padding:20px;}

	.detail-main p{margin:10px 0;}

	.detail-main input{ margin-top:10px; }

	.color-ul{ height: 32px; clear: both;}

	.color-ul li{ float: left; width:80px;height:30px; border:1px solid #ccc; margin-right: 10px; cursor:pointer;}

	.color-ul li:nth-child(1){ background-color:blue; }

	.color-ul li:nth-child(2){ background-color:red;}

	.color-ul li:nth-child(3){ background-color:#000; }

	.color-ul li:nth-child(4){ background-color:pink; }

	.size-ul{ height: 32px; clear: both;}

	.size-ul li{ float: left; border-radius: 50%; margin-right: 10px; background-color: #000; vertical-align: middle; cursor:pointer;}

	.size-ul li:nth-child(1){ width:10px;height:10px; margin-top: 10px; }

	.size-ul li:nth-child(2){ width:20px;height:20px; margin-top: 5px; }

	.size-ul li:nth-child(3){ width:30px;height:30px; }

</style>

<script>

	window.onload = function(){

		var oBtn = document.getElementById('btn');

		var oAllClearBtn = document.getElementById('allClearBtn');

		var oClearBtn = document.getElementById('clearBtn');

		var oShowImg = document.getElementById('show-img');

		var oBrush = document.getElementById('brush');

		var oColorUl = document.getElementById('color-ul');

		var aColorLis = oColorUl.getElementsByTagName('li');

		var oSizeUl = document.getElementById('size-ul');

		var aSizeLis = oSizeUl.getElementsByTagName('li');

		var oCanvas = document.getElementById('canvas');

		var oCtx = oCanvas.getContext('2d');

		oCanvas.setAttribute('width','600');

		oCanvas.setAttribute('height','600');

		var COLORS = '#000';

		var BORDER = 2;

		var maxBorder = 2;

		var CLEAR = false;

		var BRUSH = true;

		for( var i=0,len=aColorLis.length; i<len;i++ ){

			aColorLis[i].onclick = function(){

				var color = this.getAttribute('color');

				COLORS = color;

			}

		}

		for( var i=0,len=aSizeLis.length; i<len;i++ ){

			aSizeLis[i].onclick = function(){

				var size = this.getAttribute('size');

				BORDER = parseInt(size);

				maxBorder = BORDER + 2;

			}

		}

		oBtn.onclick = function(){

			var src = oCanvas.toDataURL("image/png");

			var html='<img width="600" height="600" src="'+src+'" alt="">';

			oShowImg.innerHTML = html;

		}

		oClearBtn.onclick = function(){

			CLEAR = true;

		}

		oAllClearBtn.onclick = function(){

			oCtx.clearRect(0,0,600,600);

		}

		oBrush.onclick = function(){

			CLEAR = false;

		}

		oCanvas.onmousedown = function( event ){

			oCtx.beginPath();

			var ev = window.event || event;

			var diX = ev.clientX;

			var diY = ev.clientY;

			document.onmousemove = function( event ){

				oCtx.save();

					var ev = window.event || event;

					var x = ev.clientX;

					var y = ev.clientY;

					if( CLEAR ){

						oCtx.clearRect(x,y,maxBorder,maxBorder);

						return false;

					}

					if( BRUSH ){

						oCtx.lineWidth = BORDER;

						oCtx.lineTo(x, y);

						oCtx.strokeStyle = COLORS;

		  				oCtx.stroke();//画线

						return false;

					}

				oCtx.restore();

				return false;

			}

			document.onmouseup = function( event ){

				document.onmousemove = null;

			}

		}

	}

</script>

</head>

<body>

	<div class="warp">

		<canvas id="canvas" class="canvas"></canvas>

		<div  class="left">

			<span class="fl">生成图片</span>

			<div id="show-img" class="show-img">

			</div>

		</div>

	</div>

	<div class="detail-main">

		<p>

			颜色：

		</p>

		<ul class="color-ul" id="color-ul">

			<li color="blue"></li>

			<li color="red"></li>

			<li color="#000"></li>

			<li color="pink"></li>

		</ul>

		<p>

			画笔大小：

		</p>

		<ul class="size-ul" id="size-ul">

			<li size="2"></li>

			<li size="4"></li>

			<li size="8"></li>

		</ul>

		<input type="button" value="画笔" id="brush">

		<input type="button" value="橡皮擦" id="clearBtn">

		<input type="button" value="清楚全部" id="allClearBtn">

		<input type="button" value="生成图片" id="btn">

	</div>

</body>

</html>

有问题Demo : Demo

有问题的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

    *{ margin:0;padding:0; }

    body{ }

    canvas{ background-color: #fff;border:1px solid #ccc;}

    ul,li{ padding:0;margin:0; list-style:none;}

    .fl{ float: left;}

    .warp{ height:600px;}

    .canvas{ float: left;}

    .left{ margin-left:620px;}

    .show-img{ float:left;margin-left:10px;width:600px;height:600px; border:1px solid #ccc;}

    .detail-main{ padding:20px;}

    .detail-main p{margin:10px 0;}

    .detail-main input{ margin-top:10px; }

    .color-ul{ height: 32px; clear: both;}

    .color-ul li{ float: left; width:80px;height:30px; border:1px solid #ccc; margin-right: 10px; cursor:pointer;}

    .color-ul li:nth-child(1){ background-color:blue; }

    .color-ul li:nth-child(2){ background-color:red;}

    .color-ul li:nth-child(3){ background-color:#000; }

    .color-ul li:nth-child(4){ background-color:pink; }

    .size-ul{ height: 32px; clear: both;}

    .size-ul li{ float: left; border-radius: 50%; margin-right: 10px; background-color: #000; vertical-align: middle; cursor:pointer;}

    .size-ul li:nth-child(1){ width:10px;height:10px; margin-top: 10px; }

    .size-ul li:nth-child(2){ width:20px;height:20px; margin-top: 5px; }

    .size-ul li:nth-child(3){ width:30px;height:30px; }

</style>

<script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        var oAllClearBtn = document.getElementById('allClearBtn');

        var oClearBtn = document.getElementById('clearBtn');

        var oShowImg = document.getElementById('show-img');

        var oSquareBtn = document.getElementById('squareBtn');

        var oBrush = document.getElementById('brush');

        var oColorUl = document.getElementById('color-ul');

        var aColorLis = oColorUl.getElementsByTagName('li');

        var oSizeUl = document.getElementById('size-ul');

        var aSizeLis = oSizeUl.getElementsByTagName('li');

        var oCanvas = document.getElementById('canvas');

        var oCtx = oCanvas.getContext('2d');

        oCanvas.setAttribute('width','600');

        oCanvas.setAttribute('height','600');

        var COLORS = '#000';

        var BORDER = 2;

        var maxBorder = 2;

        var CLEAR = false;

        var SQUARE = false;

        var BRUSH = true;

        for( var i=0,len=aColorLis.length; i<len;i++ ){

            aColorLis[i].onclick = function(){

                var color = this.getAttribute('color');

                COLORS = color;

            }

        }

        for( var i=0,len=aSizeLis.length; i<len;i++ ){

            aSizeLis[i].onclick = function(){

                var size = this.getAttribute('size');

                BORDER = parseInt(size);

                maxBorder = BORDER + 2;

            }

        }

        oBtn.onclick = function(){

            var src = oCanvas.toDataURL("image/png");

            var html='<img width="600" height="600" src="'+src+'" alt="">';

            oShowImg.innerHTML = html;

        }

        oClearBtn.onclick = function(){

            SQUARE = BRUSH = false;

            CLEAR = true;

        }

        oAllClearBtn.onclick = function(){

            oCtx.clearRect(0,0,600,600);

        }

        oSquareBtn.onclick = function(){

            CLEAR = BRUSH = false;

            SQUARE = true;

        }

        oBrush.onclick = function(){

            CLEAR = SQUARE = false;

            BRUSH = true;

        }

        oCanvas.onmousedown = function( event ){

            oCtx.beginPath();

            var ev = window.event || event;

            var diX = ev.clientX;

            var diY = ev.clientY;

            document.onmousemove = function( event ){

                oCtx.save();

                    var ev = window.event || event;

                    var x = ev.clientX;

                    var y = ev.clientY;

                    if( CLEAR ){

                        oCtx.clearRect(x,y,maxBorder,maxBorder);

                        return false;

                    }

                    if( SQUARE ){

                        oCtx.strokeStyle = COLORS;  //边框颜色

                        oCtx.linewidth = BORDER;  //边框宽

                        oCtx.clearRect(diX,diY,x-diX,y-diY);

                        oCtx.strokeRect(diX,diY,x-diX,y-diY);  //填充边框 x y坐标 宽 高

                        oCtx.clearRect(diX,diY,x-diX,y-diY);

                        return false;

                    }    

                    if( BRUSH ){

                        oCtx.lineWidth = BORDER;

                        oCtx.lineTo(x, y);

                        oCtx.strokeStyle = COLORS;

                          oCtx.stroke();//画线

                        return false;

                    }

                oCtx.restore();

                return false;

            }

            document.onmouseup = function( event ){

                document.onmousemove = null;

            }

        }

    }

</script>

</head>

<body>

    <div class="warp">

        <canvas id="canvas" class="canvas"></canvas>

        <div  class="left">

            <span class="fl">生成图片</span>

            <div id="show-img" class="show-img">

            </div>

        </div>

    </div>

    <div class="detail-main">

        <p>

            颜色：

        </p>

        <ul class="color-ul" id="color-ul">

            <li color="blue"></li>

            <li color="red"></li>

            <li color="#000"></li>

            <li color="pink"></li>

        </ul>

        <p>

            画笔大小：

        </p>

        <ul class="size-ul" id="size-ul">

            <li size="2"></li>

            <li size="4"></li>

            <li size="8"></li>

        </ul>

        <input type="button" value="画笔" id="brush">

        <input type="button" value="画正方形" id="squareBtn">

        <input type="button" value="橡皮擦" id="clearBtn">

        <input type="button" value="清楚全部" id="allClearBtn">

        <input type="button" value="生成图片" id="btn">

    </div>

</body>

</html>

后记：

这应该算是 canvas 最简单的demo了，网上也有很多但是本身canvas是能画方块和圆的但是我最后这个有问题的demo没完全做出来，在做方块的时候就要清除之前的这一区域了所以看起来像一层一层叠上去的，包括如果从大方块往小了托尤其快速会留下很多边框也就是没清除的，如果哪位大神有比较的好的方法请告知，向您学习。

canvas - 简单画板的更多相关文章

  1. canvas实现画板

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

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

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

  3. canvas小画板——（2）荧光笔效果

    我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...

  4. 【分享】用Canvas实现画板功能

    前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

  5. html5 canvas 涂鸦画板

    html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...

  6. 基于canvas的画板

    最近重新在看Html5&CSS3的知识,看到canvas的时候,想到了以前在学校学计算机图形学时做过的画图实验,于是想,可以基于html5和css3来做一款画板,经过1天的努力,完成了画板的一 ...

  7. canvas小画板--（1）平滑曲线

    功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,短短几十行代码就能实现: <!doctype html> <html& ...

  8. canvas简单图片处理(灰色处理)

    反色处理写的比较简单,灰色处理写了一些注释 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  9. canvas简单处理图片(反色处理)

    用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. vim 快捷键绑定

    1. 退出VIM,在shell下编译&&运行程序 :wq [root@fsjohnhuang ~]# gcc main.c -o main [root@fsjohnhuang ~]# ...

  2. [leetcode-128] 最长连续序列

    给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). 示例: 输入: [100, 4, 200, 1, 3, 2] 输出: 4 解释: 最长连续序列是 [1, 2, ...

  3. HDU 1045(炮台安置 DFS)

    题意是在 n*n 的方格中进行炮台的安置,炮台不能处于同一行或同一列(类似于八皇后问题),但若是炮台间有墙壁阻挡,则可以同时安置这对炮台.问图中可以安放的最大炮台数目. 用深搜的方法,若此处为空地,则 ...

  4. java中的日志打印

    java中的日志打印: 日志工具类: #获取日志 INFO:表示获取日志的等级 A1:表示日志存器,可以自定义名称 #===DEBUG INFO log4j.rootLogger=DEBUG,A1,A ...

  5. 解决浏览器跨域限制方案之JSONP

    一.什么是JSONP JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法. JSONP是一个非官方的协议,它允许在服务器端返回javascript标签 ...

  6. Vertica系列: 自动生成Identity 字段值的方法

    参考 https://thisdataguy.com/2015/01/05/vertica-some-uses-of-sequences/ 在 vertica 中有三种定义 identity 字段的方 ...

  7. 三.HashMap原理及实现学习总结

    HashMap是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构.本篇主要是从HashMap的工作原理,数据结构分析,HashMap存储和读取几个方面对其进行学习总结.关于Hash ...

  8. SQL Server循环——游标、表变量、临时表

    游标 在游标逐行处理过程中,当需要处理的记录数较大,而且游标处理位于数据库事务内时,速度非常慢. -- 声明变量 DECLARE @Id AS Int -- 声明游标 DECLARE C_Id CUR ...

  9. 最大似然概率（MLE）和最大后验概率（MAP）

    https://blog.csdn.net/u011508640/article/details/72815981

  10. SSR搭建服务器

    SSR搭建服务器一站式教程:https://ssr.tools/252