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 ...

随机推荐

【1】【leetcode-33，81】搜索旋转排序数组
(没思路) 33. 搜索旋转排序数组假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给 ...
C#下RSA算法的实现（适用于支付宝和易宝支付）
RSA算法代码: using System; using System.Collections.Generic; using System.Text; using System.IO; using S ...
elementUi模态框使用baiduMap错误记录
报错如下,可能是因为目标div还没生成 elementUi文档说明在dom生成后再调用,正常 buildMap(){ let map = new BMap.Map("allmap" ...
js 日期相关
Js计算指定日期加上多少天.加多少月.加多少年的日期 function DateAdd(interval, number, date) { switch (interval) { case " ...
【七】zuul路由网关
一.zuul是什么?zuul 包含以下两个最主要的功能:1.路由功能: 负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础.2.过滤器功能: 则负责对请求的处理过程进行干预,是实现请 ...
Bootstrap 使用
bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.c ...
Debian Security Advisory(Debian安全报告) DSA-4403-1 php7.0
Package : php7.0 CVE ID : 还未申请在广泛使用的开放源码通用脚本语言PHP中发现了多个安全问题:EXIF扩展存在多个无效内存访问的情况,并且发现 ...
Java SE之网络编程：知识框架
js伪数组转数组
方法1: 遍历伪数组,在把值push进一个空数组中方法2: 使用数组的slice方法,它返回的是数组,使用call或apply指向伪数组 var arr = [].slice.call(argume ...
ThinkPHP5基础学习
一.目录与文件结构二.控制器三.数据库四.模型五.模板

canvas - 简单画板

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

随机推荐

热门专题