canvas - 简单画板

截图：

上代码：.

<!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 - 简单画板的更多相关文章

canvas实现画板
canvas实现画板主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法如:绘制 ...
一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
canvas小画板——（2）荧光笔效果
我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...
【分享】用Canvas实现画板功能
前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...
html5 canvas 涂鸦画板
html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...
基于canvas的画板
最近重新在看Html5&CSS3的知识,看到canvas的时候,想到了以前在学校学计算机图形学时做过的画图实验,于是想,可以基于html5和css3来做一款画板,经过1天的努力,完成了画板的一 ...
canvas小画板--（1）平滑曲线
功能需求项目需求:需要实现一个可以自由书写的小画板简单实现对于熟悉canvas的同学来说,这个需求很简单,短短几十行代码就能实现: <!doctype html> <html& ...
canvas简单图片处理(灰色处理)
反色处理写的比较简单,灰色处理写了一些注释 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
canvas简单处理图片(反色处理)
用canvas可以简单地处理图像,比如切割灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

随机推荐

解决Lost connection to MySQL server during query错误方法
昨天使用Navicat for MySQL导入MySQL数据库的时候,出现了一个严重的错误,Lost connection to MySQL server during query,字面意思就是在查询 ...
常用Java数据库连接池
概述在这里所谓的数据库连接是指通过网络协议与数据库服务之间建立的TCP连接.通常,与数据库服务进行通信的网络协议无需由应用程序本身实现,原因有三: 实现复杂度大,需要充分理解和掌握相应的通信协议. ...
Vertica系列:Vertica和Hadoop的互操作性
Vertica 8和 Hadoop 集群的互操作性已经很不错的, 但这块肯定是Vertica研发的重点, 将来可能还有较大的变动. Vertica 集群和 Hadoop 集群的两种布局方式集群布局 ...
Kettle系列: kettle标准化trans模板
=============================主控trans + sub trans 模式=============================针对一个具体的处理任务(比如增量加载一个 ...
【十三】jvm 性能调优工具之 jstack
一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...
None.js 第二步 REPL（交互式解析器）
简单的表达式 $ node 1 + 4 // 5 5 / 2 // 2.5 3 * 5 // 15 使用变量 $ node x = 5 // 5 var y = 10 // undefined con ...
c++函数解析
1.getline() 用getline读取文本 int main() { string line; getline(cin,line,'$');//'$'can change to other co ...
Windows打开文件
cmd中, windows 打开文件命令:start: Linux 打开文件命令:open
Restful API学习Day3 - DRF视图
视图一.进化 class GenericView(APIView): """把视图中可能用到的配置和方法封装起来""" queryset ...
lua 的元表与元方法
1. 元表与元方法, 相当于C++的函数重载参考链接: https://blog.csdn.net/yueya_shanhua/article/details/52233228

canvas - 简单画板

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

随机推荐

热门专题