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

时间: 2024-11-08 22:42:20

canvas - 简单画板的相关文章

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

简单画板

刚学HTML5没多久,写了个简单画板,勿喷~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="

HTML5 canvas 做画板画图 可以做电子白板

HTML5 canvas 做画板画图 可以做电子白板 <html> <head> <meta charset="utf-8"> <title>HTML5 canvas 做画板画图 可以做电子白板</title> <style type="text/css"> <!-- #container { position: relative;} #imageView { border: 1px so

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

今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canvas的画板涂鸦动画应用,功能和之前那个类似,但是新增了回撤和清空画板的操作,实现思路也基本类似.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <canvas id="canvas" cl

实现canvas简单的验证码

首先,canvas:固定在浏览器上的画布,浏览器支持Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 及其属性和方法.canvas为我们敞开了新一扇大门.属于HTML5中新增的一个标签,看起来与其他标签区别不大,在验证码之前,应该学习canvas相关API, 本次用到的canvas方法 :fillStyle 设置或返回用于填充绘画的颜色.渐变或模式strokeStyle 设置或返回用于笔触的颜色.渐变或模式fillRect() 绘制“被填

基于canvas的画板

最近重新在看Html5&CSS3的知识,看到canvas的时候,想到了以前在学校学计算机图形学时做过的画图实验,于是想,可以基于html5和css3来做一款画板,经过1天的努力,完成了画板的一些简单的功能,发出来和大家进行分享一下. 这个画板的功能十分的简单,只是实现了随意画,基于橡皮筋的直线.圆.矩形.三角形的画法以及橡皮擦等,线条有数十种宽度和数十条颜色,而且能够下载完成的图画. 截图如下: 最后附上源码:https://github.com/Mafurion/Painter

html5 canvas 涂鸦画板

html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100%的时候点击读取文件,如果没显示就多点几次?1. [代码]主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&quo

canvas简易画板。

在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById('myCanvas'); var ctx= c.getContext('2d');var b=document.getElementById('b'); var b1=document.getElementById('b1'); var bbb=document.getElementById('bbb

Android利用canvas画画板

首先新建一个项目工程,建立文件,如下图所示 首先配置页面布局文件activity_main.xml,如下图所示: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 a