以下是 Canvas多功能涂鸦画板绘图特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas多功能涂鸦画板绘图特效</title>
<style>
body,html{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0 no-repeat; background-size: cover; overflow: hidden; font-family: "Microsoft yahei"; background-color: #fff; }
li{ list-style-type: none; }
ul{ padding-left: 10px }
h1{
position:fixed;
left:15px;
top:5px;
width:250px;
height:60px;
color: #ff5e83;
font-size:26px;
line-height:60px;
text-align:center;
background-color:;
}
canvas{ position: fixed; left: 280px; top: 5px; display: block; cursor: pointer; background-color: #FFFFFF; border: 1px solid #CCCCCC; }
.container{
width:250px;
height:60px;
position:fixed;
left:15px;
top:70px;
}
.container h2{
width:100%;
height:60px;
font-size:22px;
text-align:center;
color: #ff377e;
font-weight:normal;
line-height:60px;
border-bottom:1px solid #000;
}
.container h3{
width:100%;
height:30px;
font-size:18px;
text-align:center;
color: #41b1ff;
font-weight:normal;
line-height:30px;
}
.row{ width: 100%; height: auto; background-color: rgba(192,192,192,0.50); overflow: hidden; }
.type{
width:100%;
height:auto;
margin:20px 0;
padding-bottom:10px;
border-bottom:1px solid #fff;
}
.type:after{
content:"";
display:block;
clear:both;
}
.type li{
float:left;
width:90px;
height:45px;
margin:0 auto;
background-color:#0078ff;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
margin-bottom:15px;
border-radius:5px;
cursor:pointer;
transition:all 0.7s;
}
.type li:hover{
background-color:#fff;
color:#0078ff;
box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
}
.type .typeactive{
background-color:#fff;
color:#0078ff;
box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
}
.type li:nth-child(odd){
margin-left:25px;
}
.type li:nth-child(even){
margin-left:20px;
}
.style{
width:100%;
height:40px;
}
.style li{
float:left;
width:90px;
height:45px;
background-color:#FFBC00;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
border-radius:5px;
cursor:pointer;
transition:all 0.7s;
}
.style li:hover{
color: #ffa800;
background-color:#fff;
box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
.style .styleactive{
color: #ffa800;
background-color:#fff;
box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
.style li:nth-child(1){
margin-left:25px;
}
.style li:nth-child(2){
margin-left:20px;
}
.poly{
position:relative;
}
.bian{
position:absolute;
left:100px;top:0;
width:90px;
height:auto;
border-radius:5px;
background-color:#EC494E;
overflow:hidden;
overflow:hidden;
transform:scale(1.2);
display:none;
}
.bian span{
display:block;
float:left;
width:40px;
height:45px;
font-size:16px;
color:#fff;
text-align:center;
line-height:40px;
color:#fff;
transition:all 0.7s;
}
.bian input{
float:left;
width:45px;
height:35px;
margin-top:5px;
border:1px solid #fff;
box-sizing:border-box;
text-align:center;
line-height:40px;
font-size:18px;
color:#fff;
background:#EC494E;
border-radius:3px;
box-shadow:0 0 0 4px #fff inset;
transition:all 0.7s;
}
.cut,.create,.back{
float:left;
width:90px;
height:45px;
margin-left:25px;
margin-bottom:15px;
background-color: #5bd219;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
border-radius:5px;
cursor:pointer;
}
.copy,.clear,.save{
float:left;
width:90px;
height:45px;
margin-left:20px;
margin-bottom:15px;
background-color: #5bd219;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
border-radius:5px;
cursor:pointer;
}
.shezhi{
transition:all 0.7s;
}
.shezhistyle{
background:#fff;
color:#5bd219;
}
.create{
position:relative;
}
.xinjian{
position:absolute;
left:0;top:0;
width:200px;
height:165px;
border-radius:5px;
background-color:#EC494E;
box-shadow:0 0 15px rgba(236, 73, 78, 0.76);
cursor:default;
display:none;
}
.xinjian:hover{
color:#fff;
}
.xinjian_before{
position:absolute;
right:0;
top:0;
width:20px;
height:20px;
color:#fff;
line-height:16px;
text-indent:-1px;
font-size:30px;
border:1px solid #fff;
transform:rotate(45deg);
border-radius:50%;
cursor:pointer;
}
.xinjian h6{
width:100%;
height:50px;
color:#fff;
line-height:50px;
text-align:center;
font-size:20px;
font-weight:normal;
}
#ding{
width:60px;
height:30px;
font-size:14px;
border-radius:3px;
color:#fff;
background-color:#0078ff;
border:0;
outline:none;
cursor:pointer;
box-shadow:0 0 10px rgba(0, 120, 255, 0.5);
}
.xinjian_width,.xinjian_height{
float:left;
width:85px;
height:40px;
margin-left:10px;
border-radius:5px;
margin-bottom:20px;
background-color:#FFBC00;
}
.xinjian_width:hover,.xinjian_height:hover{
background-color:#fff;
color:#000;
}
.xinjian_width span,.xinjian_height span{
float:left;
width:30px;
height:100%;
font-size:16px;
text-align:center;
line-height:40px;
}
.xinjian_width input,.xinjian_height input{
float:left;
margin-top:5px;
width:50px;
height:30px;
text-align:center;
line-height:30px;
font-size:14px;
border:1px solid #FFBC00;
box-sizing:border-box;
}
.box{
float:left;
width:90px;
height:auto;
background-color:#EC494E;
overflow:hidden;
border-radius:5px;
transition:all 0.7s;
}
.box{
margin-left:25px;
}
.linewidth{
margin-left:20px;
}
.box:hover{
background-color:#fff;
}
.box span{
display:block;
float:left;
width:40px;
height:45px;
font-size:16px;
color:#fff;
text-align:center;
line-height:40px;
color:#fff;
transition:all 0.3s;
}
.box input{
float:left;
width:45px;
height:35px;
margin-top:5px;
border:1px solid #fff;
box-sizing:border-box;
text-align:center;
line-height:40px;
font-size:18px;
color:#fff;
background:#EC494E;
border-radius:3px;
box-shadow:0 0 0 4px #fff inset;
transition:all 0.3s;
}
.box2 span{
width:55px;
}
.box2 input{
width:140px;
}
.space{
float:left;
width:100%;
height:0;
border-bottom:1px solid #fff;
margin:20px 0;
}
</style>
</head>
<body>
<h1>画板</h1>
<div class="container">
<div class="row">
<ul name="" class="type">
<li class="line typeactive" data="line">直 线</li>
<li class="rect" data="rect">矩 形</li>
<li class="circle" data="circle">圆 圈</li>
<li class="pen" data="pen">铅 笔</li>
<li class="poly" data="poly">多 边 形
<div class="bian"><span>边数</span><input type="number" name="number" min="3" value="3" max="15"></div></li>
<li class="eraser" data="eraser">橡 皮</li>
</ul>
<ul class="style">
<li class="stroke styleactive">描 边</li>
<li class="fill">填 充</li>
</ul>
<div class="space"></div>
<div class="box"><span>颜色</span></label><input type="color" name="color" value="#000000"></div>
<div class="box linewidth"><span>线宽</span><input type="number" name="number" value="1" max="150" min="1"></div>
<div class="space"></div>
<div class="create shezhi">新 建
<div class="xinjian">
<h6>画 板 尺 寸</h6>
<div class="xinjian_width">
<span>宽</span>
<input type="number" max="1070" min="500" value="500">
</div>
<div class="xinjian_height">
<span>高</span>
<input type="number" max="648" min="300" value="300">
</div>
<input type="button" name="queding" value="确定" id="ding">
<div class="xinjian_before">+</div>
</div>
</div>
<div class="clear shezhi">清 空</div>
<div class="back shezhi">撤 销</div>
<div class="save shezhi">保 存</div>
<div class="cut shezhi" data="cut">剪 切</div>
<div class="copy shezhi">复 制</div>
</div>
</div>
<canvas width="1070" height="648"></canvas>
<script src="index.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
var container=$(".container");
var canvas=document.querySelector("canvas");
var screenWidth=document.documentElement.clientWidth;
var screenHeight=document.documentElement.clientHeight;
var width=screenWidth-295;
var height=screenHeight-15;
canvas.width=width;
canvas.height=height;
var obj=canvas.getContext("2d");
var typechoose=$(".type li");
var stylechoose=$(".style li");
var colorchoose=document.querySelector("input[type=color]");
var widthchoose=document.querySelector(".linewidth input[type=number]");
var canvasWidth=document.querySelector(".xinjian_width input[type=number]");
var canvasHeight=document.querySelector(".xinjian_height input[type=number]");
canvasWidth.value=width;canvasHeight.value=height;
canvasWidth.max=screenWidth-295;canvasHeight.max=screenHeight-15;
var ding=document.querySelector("#ding");
var poly=$(".poly");
var bian=$(".bian");
var polychoose=$(".bian input");
var shezhi=$(".shezhi");
var cut=$(".cut");
var copy=$(".copy");
var back=$(".back");
var clear=$(".clear");
var save=$(".save");
var create=$(".create");
var xinjian=$(".xinjian");
var create_close=$(".xinjian_before");
var cutflag=false;
var iscut=true;
var color="#000";
var type="line";
var n=3;
var linewidth="1";
var style="stroke";
var arr=[];
$(".fill").css({display:"none"});
// 多边形
poly.hover(function(){
bian.fadeIn();
},function(){
bian.fadeOut();
})
// 绘制形状
typechoose.each(function(index,ele){
$(ele).click(function(){
typechoose.removeClass("typeactive");
$(this).toggleClass("typeactive");
cut.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
copy.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
type=$(this).attr("data");
if($(this).is(".line")||$(this).is(".pen")){
style="stroke";
$(".stroke").addClass("styleactive");
$(".fill").css({display:"none"}).removeClass("styleactive");
}else{
$(".fill").css({display:"block"});
}
})
})
// 描边、填充单击事件
stylechoose.each(function(index,ele){
$(ele).click(function(){
style=$(this).attr("class");
stylechoose.removeClass("styleactive");
$(this).toggleClass("styleactive");
})
})
// 剪切
cut.click(function(){
type=$(this).attr("data");
typechoose.removeClass("typeactive");
$(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
iscut=true;
})
copy.click(function(){
type="cut";
typechoose.removeClass("typeactive");
$(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
iscut=false;
})
// 设置
shezhi.each(function(index,ele){
if($(ele).is(".cut")||$(ele).is(".copy")){
return;
}else{
$(ele).click(function(){
$(this).css({color:"#5bd219",backgroundColor:"#fff"}).animate({opacity:0.99},200,function(){
$(this).css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
});
})
}
})
// 撤销
back.click(function(){
arr.pop();
obj.clearRect(0,0,width,height);
if(arr.length>0){
obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
}
})
// 清除
clear.click(function(){
arr=[];
obj.clearRect(0,0,width,height);
})
// 保存
save.click(function(){
var reg=canvas.toDataURL("image/png");//跳转页面手动保存
// var reg=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//直接自动保存下载
location.href=reg;
})
// 新建画布
create.click(function(){
xinjian.fadeIn();
})
create_close.click(function(e){
e.stopPropagation()
xinjian.fadeOut();
})
canvasWidth.onblur=function(){
if(this.value<=this.min){
this.value=this.min;
}
if(this.value>=screenWidth-295){
this.value=screenWidth-295;
}
width=this.value;
}
canvasHeight.onblur=function(){
if(this.value<=this.min){
this.value=this.min;
}
if(this.value>=screenHeight-15){
this.value=screenHeight-15;
}
height=this.value;
}
ding.onclick=function(e){
canvas.width=width;
canvas.height=height;
canvas.style.left=(screenWidth+295-canvas.width)/2+"px";
canvas.style.top=(screenHeight-5-canvas.height)/2+"px";
arr=[];
obj.clearRect(0,0,width,height);
e.stopPropagation()
xinjian.fadeOut();
}
// 颜色选择
colorchoose.onchange=function(){
color=this.value;
}
// 粗细改变
widthchoose.onchange=function(){
linewidth=this.value;
}
//多边形边数
polychoose.change(function(){
n=this.value;
})
var x,y,w,h;
var lx,ly,lw,lh;
var cutdata;
canvas.onmousedown=function(e){
x=e.offsetX;
y=e.offsetY;
if(type=="pen"){
obj.beginPath();
obj.moveTo(x,y);
}
if(type=="eraser"){
obj.clearRect(x-5,y-5,10,10);
}
if(cutflag&&type=="cut"){
if(arr.length!=0){
arr.splice(-1,1);
}
}
var draw=new Draw(obj,{type:style,color:color,width:linewidth});//实例化构造函数
canvas.onmousemove=function(e){
w=e.offsetX;
h=e.offsetY;
if(type!="eraser"){
obj.clearRect(0,0,width,height);
if(arr.length!=0){
obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
}
}
if(cutflag&&type=="cut"){
if(iscut){
obj.clearRect(lx,ly,lw-lx,lh-ly);
}
var nx=lx+(w-x);
var ny=ly+(h-y);
obj.putImageData(cutdata,nx,ny);
}else if(type=="poly"){
draw[type](x,y,w,h,n);
}else{
draw[type](x,y,w,h);
}
}
document.onmouseup=function(){
canvas.onmousemove=null;
document.onmouseup=null;
if(type=="cut"){
if(!cutflag){
cutflag=true;
cutdata=obj.getImageData(x+1,y+1,w-x-2,h-y-2);
lx=x;ly=y;lw=w;lh=h;
container.css({display:"none"});
}else{
cutflag=false;
container.css({display:"block"});
}
}
arr.push(obj.getImageData(0,0,width,height));
}
}
</script>
</body>
</html>JS代码(index.js):
/** * Created by 张雅鹏 on 2016/11/8. */
function Draw(obj,setting){
this.obj=obj;
this.type=setting.type||"stroke";
this.color=setting.color||"#000";
this.width=setting.width||"1";
}
Draw.prototype={
init:function(){
this.obj.strokeStyle=this.color;
this.obj.fillStyle=this.color;
this.obj.lineWidth=this.width;
}
,rect:function(x,y,x1,y1){
this.init();
this.obj.beginPath();
this.obj.rect(x,y,x1-x,y1-y);
if(this.type=="stroke"){
this.obj.stroke();
}
else if(this.type=="fill"){
this.obj.fill();
}
}
,line:function(x,y,x1,y1){
this.init();
this.obj.beginPath();
this.obj.moveTo(x,y);
this.obj.lineTo(x1,y1);
this.obj.stroke();
}
,circle:function(x,y,x1,y1){
this.init();
var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
this.obj.beginPath();
this.obj.arc(x,y,r,0,2*Math.PI);
if(this.type=="stroke"){
this.obj.stroke();
}
else if(this.type=="fill"){
this.obj.fill();
}
}
,poly:function(x,y,x1,y1,n){
this.init();
var obj=this.obj;
var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
;
obj.save();
obj.translate(x,y);
obj.rotate(Math.PI/2);
var nx=r*Math.cos(Math.PI/n);
var ny=r*Math.sin(Math.PI/n);
obj.beginPath();
obj.lineCap="round";
obj.moveTo(nx,ny);
for(var i=0;
i<=n;
i++){
obj.rotate(Math.PI*2/n);
obj.lineTo(nx,-ny);
}
if(this.type=="stroke"){
this.obj.stroke();
}
else if(this.type=="fill"){
this.obj.fill();
}
obj.restore();
}
,pen:function(x,y,x1,y1){
this.init();
this.obj.save();
this.obj.lineCap="round";
this.obj.lineTo(x1,y1);
this.obj.stroke();
this.obj.restore();
}
,eraser:function(x,y,x1,y1){
this.obj.lineCap="round";
this.obj.clearRect(x1-5,y1-5,10,10);
}
,cut:function(x,y,x1,y1){
this.init();
this.obj.save();
this.obj.setLineDash([4,2]);
this.obj.beginPath();
this.obj.lineWidth=1;
this.obj.rect(x,y,x1-x,y1-y);
this.obj.stroke();
this.obj.restore();
}
}
分享到QQ
分享到微博
微信扫一扫
