canvas - 简单画板

时间：2025-01-28 09:04:38

截图：

canvas - 简单画板

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没完全做出来，在做方块的时候就要清除之前的这一区域了所以看起来像一层一层叠上去的，包括如果从大方块往小了托尤其快速会留下很多边框也就是没清除的，如果哪位大神有比较的好的方法请告知，向您学习。

相关文章