javascript制作简便画板附图,可调画笔颜色

作者: 关于计算机  发布:2019-09-14

js+html5 canvas完毕的涂鸦画板特效,可调画笔颜色|粗细|橡皮,能够保存涂鸦成效为图片编码,极度适合学习html5的canvas,必得援救html5的浏览器技术看到效果。

见图:

复制代码 代码如下:

图片 1 

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 " />
<meta name="description" content="javascript结合html5 canvas完成的涂鸦板,JavaScript分享网,js脚本,网页特效,网页模板,pngLogo,矢量图下载" />
<meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNGLogo,矢量图" name="keywords" />
</head>
<body>
<style>
*{margin:0;padding:0;}
.fa{width:740px;margin:0 auto;}
.top{margin:20px 0;}
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
.top .i1{background:#000000;}
.top .i2{background:#FF0000;}
.top .i3{background:#80FF00;}
.top .i4{background:#00FFFF;}
.top .i5{background:#808080;}
.top .i6{background:#FF8000;}
.top .i7{background:#408080;}
.top .i8{background:#8000FF;}
.top .i9{background:#CCCC00;}
#canvas{background:#eee;cursor:default;}
.font input{font-size:14px;}
.top .grea{background:#aaa;}
</style>
</head>
<body>
<div class="fa">
<div class="top">
<div id="color">
请选拔画笔颜料:
<input class="i1" type="button" value="" />
<input class="i2" type="button" value="" />
<input class="i3" type="button" value="" />
<input class="i4" type="button" value="" />
<input class="i5" type="button" value="" />
<input class="i6" type="button" value="" />
<input class="i7" type="button" value="" />
<input class="i8" type="button" value="" />
<input class="i9" type="button" value="" />
</div>
<div class="font" id="font">
请选取画笔的上升的幅度:
<input type="button" value="细" />
<input type="button" value="中" class="grea"/>
<input type="button" value="粗" />
</div>
<div>
<span id="error">若是有错误,请使用橡皮擦:</span>
<input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" />
</div>
<input id="clear" type="button" value="清除画布" style="width:80px;"/>
<input id="revocation" type="button" value="撤销" style="width:80px;"/>
<input id="imgurl" type="button" value="导出图片路径" style="width:80px;"/>
</div>
<canvas id="canvas" width="740" height="420">您的浏览器不支持canvas 标签</canvas>
<div id="div1"></div>
</div>
<div id="html">
</div>
<script>
(function(){
var paint={
init:function()
{
this.load();
},
load:function()
{
this.x=[];//记录鼠标移动是的X坐标
this.y=[];//记录鼠标移动是的Y坐标
this.clickDrag=[];
this.lock=false;//鼠标移动前,推断鼠标是或不是按下
this.isEraser=false;
//this.提姆er=null;//橡皮擦运转沙漏
//this.radius=5;
this.storageColor="#000000";
this.eraserRadius=15;//擦除半径值
this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//画笔颜色值
this.fontWeight=[2,5,8];
this.$=function(id){return typeof id=="string"?document.getElementById(id):id;};
this.canvas=this.$("canvas");
if (this.canvas.getContext) {
} else {
alert("您的浏览器不帮助 canvas 标签");
return;
}
this.cxt=this.canvas.getContext('2d');
this.cxt.lineJoin = "round";//context.lineJoin - 内定两条线段的接连格局
this.cxt.lineWidth = 5;//线条的增长幅度
this.iptClear=this.$("clear");
this.revocation=this.$("revocation");
this.imgurl=this.$("imgurl");//图片路线开关
this.w=this.canvas.width;//取画布的宽
this.h=this.canvas.height;//取画布的高
this.touch =("createTouch" in document);//决断是不是为手持设备
this.Start伊夫nt = this.touch ? "touchstart" : "mousedown";//协理触摸式使用相应的事件代表
this.MoveEvent = this.touch ? "touchmove" : "mousemove";
this.EndEvent = this.touch ? "touchend" : "mouseup";
this.bind();
},
bind:function()
{
var t=this;
/*消除画布*/
this.iptClear.onclick=function()
{
t.clear();
};
/*鼠标按下事件,记录鼠标地点,并绘制,解锁lock,张开mousemove事件*/
this.canvas['on'+t.StartEvent]=function(e)
{
var touch=t.touch ? e.touches[0] : e;
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标,以画布左上角为源点
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标,以画布左上角为源点
if(t.isEraser)
{
/*
t.cxt.globalCompositeOperation = "destination-out";
t.cxt.beginPath();
t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2);
t.cxt.strokeStyle = "rgba(250,250,250,0)";
t.cxt.fill();
t.cxt.globalCompositeOperation = "source-over";
*/
t.resetEraser(_x,_y,touch);
}else
{
t.movePoint(_x,_y);//记录鼠标地方
t.drawPoint();//绘制路径
}
t.lock=true;
};
/*鼠标移动事件*/
this.canvas['on'+t.MoveEvent]=function(e)
{
var touch=t.touch ? e.touches[0] : e;
if(t.lock)//t.lock为true则执行
{
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标,以画布左上角为起源
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标,以画布左上角为源点
if(t.isEraser)
{
//if(t.Timer)clearInterval(t.Timer);
//t.Timer=setInterval(function(){
t.resetEraser(_x,_y,touch);
//},10);
}
else
{
t.movePoint(_x,_y,true);//记录鼠标地点
t.drawPoint();//绘制路径
}
}
};
this.canvas['on'+t.EndEvent]=function(e)
{
/*重新设置数据*/
t.lock=false;
t.x=[];
t.y=[];
t.clickDrag=[];
clearInterval(t.Timer);
t.Timer=null;
};
this.revocation.onclick=function()
{
t.redraw();
};
this.changeColor();
this.imgurl.onclick=function()
{
t.getUrl();
};
/*橡皮擦*/
this.$("eraser").onclick=function(e)
{
t.isEraser=true;
t.$("error").style.color="red";
t.$("error").innerHTML="您已利用橡皮擦!";
};
},
movePoint:function(x,y,dragging)
{
/*将鼠标坐标增多到个别对应的数组里*/
this.x.push(x);
this.y.push(y);
this.clickDrag.push(y);
},
drawPoint:function(x,y,radius)
{
for(var i=0; i < this.x.length; i++)//循环数组
{
this.cxt.beginPath();//context.begin帕特h() , 筹算绘制一条渠道
if(this.clickDrag[i] && i){//当是拖动并且i!=0时,从上多个点伊始画线。
this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开四个路线,并钦命路径的起点
}else{
this.cxt.moveTo(this.x[i]-1, this.y[i]);
}
this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将日前点与钦点的点用一条笔直的门路连接起来
this.cxt.close帕特h();//context.closePath() , 如若当前路径是开采的则关闭它
this.cxt.stroke();//context.stroke() , 绘制当前路径
}
},
clear:function()
{
this.cxt.clearRect(0, 0, this.w, this.h);//清除画布,左上角为起源
},
redraw:function()
{
/*撤销*/
this.cxt.restore();
},
preventDefault:function(e){
/*阻碍暗许*/
var touch=this.touch ? e.touches[0] : e;
if(this.touch)touch.preventDefault();
else window.event.returnValue = false;
},
changeColor:function()
{
/*为开关增多事件*/
var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input");
for(var i=0,l=iptNum.length;i<l;i++)
{
iptNum[i].index=i;
iptNum[i].onclick=function()
{
t.cxt.save();
t.cxt.strokeStyle = t.color[this.index];
t.storageColor=t.color[this.index];
t.$("error").style.color="#000";
t.$("error").innerHTML="借使有错误,请使用橡皮擦:";
t.cxt.strokeStyle = t.storageColor;
t.isEraser=false;
}
}
for(var i=0,l=fontIptNum.length;i<l;i++)
{
t.cxt.save();
fontIptNum[i].index=i;
fontIptNum[i].onclick=function()
{
t.changeBackground(this.index);
t.cxt.lineWidth = t.fontWeight[this.index];
t.$("error").style.color="#000";
t.$("error").innerHTML="若是有不当,请使用橡皮擦:";
t.isEraser=false;
t.cxt.strokeStyle = t.storageColor;
}
}
},
changeBackground:function(num)
{
/*累加画笔粗细的提醒背景颜色切换,紫褐为当下*/
var fontIptNum=this.$("font").getElementsByTagName("input");
for(var j=0,m=fontIptNum.length;j<m;j++)
{
fontIptNum[j].className="";
if(j==num) fontIptNum[j].className="grea";
}
},
getUrl:function()
{
this.$("html").innerHTML=this.canvas.toDataURL();
},
resetEraser:function(_x,_y,touch)
{
/*运用橡皮擦-提示*/
var t=this;
//this.cxt.lineWidth = 30;
/*source-over 私下认可,相交部分由后绘制图形的填写(颜色,渐变,纹理)覆盖,全体浏览器通过*/
t.cxt.globalCompositeOperation = "destination-out";
t.cxt.beginPath();
t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);
t.cxt.strokeStyle = "rgba(250,250,250,0)";
t.cxt.fill();
t.cxt.globalCompositeOperation = "source-over"
}
};
paint.init();
})();
</script>
<div style="clear:both"></div>
</body>
</html>

代码如下:

您大概感兴趣的文章:

  • JS+HTML5 Canvas实现轻易的写字板效能示例
  • Javascript HTML5 Canvas达成的三个画板
  • html5+javascript制作轻易画板附图
  • JS+html5 canvas完成的简便绘制折线图效果示例
  • js+html5兑现canvas绘制圆形图案的方法
  • js+html5落到实处canvas绘制镂空字体文本的点子
  • js+html5绘制图片到canvas的秘诀
  • js HTML5 Canvas绘制转盘抽取奖品
  • javascript+HTML5 Canvas绘制转盘抽取奖品
  • JavaScript+html5 canvas绘制的小人效果
  • 原生JS+HTML5贯彻的可调治写字板功用示例

复制代码 代码如下:

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" Content="text/html;charset=utf-8">
<head>

<title>简易画板</title>

<style>
#eraseImg{ /*橡皮样式*//**/
border:solid;
color:gray;
border-radius: 118px;
width: 5px;
height: 5px;
position: absolute;
display: none;

}
.eraseSeries{ /*橡皮大小单选开关组的排列,此div不单独占一行*/
display: inline-block;
}

</style>
<script src="jquery-1.7.1.js"></script>
<script>

var c;//获取到的2d画板
var painting = false;//剖断是或不是正在水墨画,即鼠标左键是还是不是长按下来
var canvas;//画板
$(function(){

$(".eraseSeries").hide();//开始状态单选开关组遮盖

canvas=document.getElementById("myCanvas");
c=canvas.getContext("2d");
c.lineCap="round";//设置笔迹边角,否则笔迹会并发断层
c.strokeStyle="black";//笔迹的颜色
c.lineWidth=5;//笔迹的粗细
$("#color").change(function(){//笔迹颜色爆发转移时
if(eraseFlag==true)//处在擦皮状态
{
$("#erase").trigger("click");//自动触发橡皮的点击事件,以回到到画笔状态
}
c.strokeStyle=$(this).val();//设置画笔状态
c.lineWidth=$(this).val();

});

$("#fontSize").change(function(){//画笔粗细爆发转移
if(eraseFlag==true)//同上
{
$("#erase").trigger("click");
}
c.lineWidth=$(this).val();
c.strokeStyle=$("#color").val();
//eraseFlag=false;
});

$(".eraseSeries").click(function(){//橡皮大小发生变动
var size=$('input[name="eraseSize"]:checked').val();//获取到橡皮单选开关组的选中值
sizeE=size;//将该值传到全局变量上,sizeE必要用来决定橡皮样式的地点
c.lineWidth=size;
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮样式大小爆发变动
});

$("#erase").toggle(function(){//橡皮开关的点击翻转事件
c.save();//保持上次安装的情景
eraseFlag=true;
c.strokeStyle="white";

$("#erase").text("画笔");//改动按键上的文字
$(".eraseSeries").show('fast');//橡皮单选组出现
// $("#eraseImg").show();
sizeE=5;

},function(){
eraseFlag=false;
$("#erase").text("橡皮");
$(".eraseSeries").hide('fast');
c.restore();//恢复上次画笔的情事(蕴涵颜色,粗细等)
});

//setInterval(paint,2);

});

var p_x;//上次鼠标地点
var p_y;
var p_x_now;//当前转手鼠标地点
var p_y_now;
var eraseFlag=false;
var sizeE;//橡皮大小

$(document).mousedown(function(e){//鼠标按下接触事件

// alert(sizeE);
p_x= e.clientX;//获取地方,并置为上次鼠标地点
p_y= e.clientY;
painting = true;//画笔运行标记

});
$(document).mousemove(function(e){//鼠标移动触发事件
if(eraseFlag==true&& e.clientY>30)//橡皮处在激活状态,何况鼠标Y的岗位大于30,也即鼠标在画板内
{

//橡皮图像跟随鼠标而动
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast');
}
else
{
$("#eraseImg").hide('fast');
}
if(painting==true)//处于画笔激活状态
{
//alert(1);
p_x_now= e.clientX;//当前弹指间的鼠标地点
p_y_now= e.clientY;
c.begin帕特h();//开头路线
//曲线是由一段段相当小的直线构成,计算机械运输算速度赶快,这是一种以直线迭代画曲线的格局
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移动到起始点
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//从开头点画直线到极点

c.stroke();
c.closePath();//密闭路线,那个很首要,假若路线不密闭,
// 那么一旦canvas颜色发生改换,全数的前边画过的颜料都产生变动
p_x = p_x_now;//壹回迭代后讲当前的一弹指坐标值赋给上次鼠标坐标值
p_y = p_y_now;
}

});

$(document).mouseup(function(e){//鼠标松开触发事件

painting=false;//冻结画笔
});

</script>
</head>
<body>
<div >
<select id="color" > <!--画笔颜色-->
<option class="opt" value="red">红色</option>
<option class="opt" value="yellow">黄色</option>
<option class="opt" value="blue">蓝色</option>
<option class="opt" value="black" selected>黑色</option>
<option class="opt" value="green">绿色</option>
</select>

<select id="fontSize"> <!--画笔大小-->
<option value=5 selected>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=30>30</option>
</select>
<button id="erase">擦皮</button> <!--橡皮开关-->
<div class="eraseSeries"> <!--橡皮大小-->
<input type="radio" name="eraseSize" value="5" checked/>5
<input type="radio" name="eraseSize" value="10"/>10
<input type="radio" name="eraseSize" value="15"/> 15
<input type="radio" name="eraseSize" value="20"/> 20
<input type="radio" name="eraseSize" value="30"/>30
</div>
</div>

<!--<button id="btn">btn</button>-->
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!--整个画布-->

<div id="eraseImg"> <!--橡皮形状-->
</div>

</body>
</html>

您恐怕感兴趣的稿子:

  • JS+HTML5 Canvas完成简单的写字板效率示例
  • Javascript HTML5 Canvas达成的三个画板
  • javascript结合html5 canvas完成(可调画笔颜料/粗细/橡皮)的涂鸦板
  • JS+html5 canvas达成的简短绘制折线图效果示例
  • js+html5兑现canvas绘制圆形图案的点子
  • js+html5落到实处canvas绘制镂空字体文本的章程
  • js+html5绘制图片到canvas的艺术
  • js HTML5 Canvas绘制转盘抽取奖金
  • javascript+HTML5 Canvas绘制转盘抽取奖金
  • JavaScript+html5 canvas绘制的小人效果
  • 原生JS+HTML5落到实处的可调治写字板功能示例

本文由今晚买四不像发布于关于计算机,转载请注明出处:javascript制作简便画板附图,可调画笔颜色

关键词:

上一篇:Jquery带搜索框的下拉菜单
下一篇:没有了