截图：

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. java生产环境增量发版陷阱【原】

    前言 在生产环境,我们为了降低发版风险,一般都只做增量发布,不做全量发布. 除非项目只有一到两人开发,对时间线和代码脉络结构一清二楚,才可全量发布. 然而增量发布也是有一定隐藏陷阱在里面的,以下就是笔 ...

  2. javasrcipt的作用域和闭包（二）续篇之：函数内部提升机制与Variable Object

    一个先有鸡还是先有蛋的问题,先看一段代码: a = 2; var a; console.log(a); 通常我们都说JavaScript代码是由上到下一行一行执行,但实际这段代码输出的结果是2.但这段 ...

  3. 用jquery的ajax方法获取return返回值的正确姿势

    如果jquery中,想要获取ajax的return返回值,必须注意两方面,ajax的同步异步问题,在ajax方法里面还是外面进行return返回值. 下面列举了三种写法,如果想成功获取到返回值,参考第 ...

  4. 关于js事件执行顺序

    关于js事件执行顺序小技巧 js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 ...

  5. ACM-ICPC 2018 焦作赛区网络预赛 L Poor God Water（矩阵快速幂，BM）

    https://nanti.jisuanke.com/t/31721 题意 有肉,鱼,巧克力三种食物,有几种禁忌,对于连续的三个食物:1.这三个食物不能都相同:2.若三种食物都有的情况,巧克力不能在中 ...

  6. Spark源码剖析 - SparkContext的初始化(五)_创建任务调度器TaskScheduler

    5. 创建任务调度器TaskScheduler TaskScheduler也是SparkContext的重要组成部分,负责任务的提交,并且请求集群管理器对任务调度.TaskScheduler也可以看作 ...

  7. 06-查询操作(DQL)-单表查询

    一. 综述   查询操作主要从两个方面来说:单表查询和多表查询. 单表查询包括:简单查询.过滤查询.结果排序.分页查询.聚集函数. 二 . 案例设计   1. 设计产品表(product).包括:主键 ...

  8. vue-router 编程式路由

    $route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...

  9. 学习go语言编程系列之定义变量

    package main import ( "fmt" "math") func main() { // 1. 定义变量名age,不初始化,使用对应类型的默认值 ...

  10. tomcat部署应用时设置context path为空的上下文路径问题

    在server.xml中添加<Context>元素,配置如下: <Context docBase="app" path="" reloadab ...