H5 canvas制作画图
2017-08-12 14:03
477 查看
1概述
随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。
2效果图如下：
3主要功能
支持选择画笔的颜色
支持选择画笔的线条粗细
4实现方式
首先，我们需要一个容器，来将我的画图工具放入网页中
<divclass="content">
然后我们要进行布局，布局详细如下，大体分为header、body、footer三部分：
<divclass="header">
<divclass="left">
<imgclass="choosePan"src="img/p1.png"/>
<imgclass="pan"src="img/p2.gif"/>
<imgclass="pan"src="img/p3.gif"/>
</div>
<divclass="right">
<imgclass="chooseLineWidth"src="img/w3.png"/>
<imgclass="lineWidth"src="img/w2.gif"/>
<imgclass="lineWidth"src="img/w1.gif"/>
</div>
</div>
<divclass="body">
<canvasid="can"height="500"width="500"></canvas>
<divclass="show">
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<inputclass="rightButton"type="button"value="清空"/>
</div>
</div>
<divclass="footer">
<inputtype="button"value="保存"/>
<inputtype="button"value="清空"/>
</div>
functionchoosePan(cell,index){
pan=index;
//改变鼠标的样式（这里可以单独拿出一个方法，此处为了简略）
switch(pan){
case0:
canvas.style.cursor="url('img/p1.png')
048,auto";
break;
case1:
canvas.style.cursor="url('img/p2.gif')
048,auto";
break;
case2:
canvas.style.cursor="url('img/p3.gif')
048,auto";
break;
}
//清除笔的颜色
clearPan();
//选择笔的颜色
cell.className="choosePan";
}
functionclearPan(){
varpans=document.getElementsByClassName("choosePan");
for(vari=0;i<pans.length;i++){
pans[i].className="pan";
}
}
functionchooseLineWidth(cell,index){
line=index;
clearLineWidth();
cell.className="chooseLineWidth";
}
functionclearLineWidth(){
varpans=document.getElementsByClassName("chooseLineWidth");
for(vari=0;i<pans.length;i++){
pans[i].className="lineWidth";
}
}
3.保存和清空画布：
<inputtype="button"value="保存"onclick="keep()"/>
<inputtype="button"value="清空"onclick="clearCanvas()"/>
functionclearCanvas(){
context.strokeStyle="white";
context.clearRect(0,0,500,500);
}
functionkeep(){
varurl=canvas.toDataURL();
varmyKeep=document.getElementsByClassName("divKeep");
varindex=-1;
for(vari=0;i<myKeep.length;i++){
if(!myKeep[i].innerHTML){
index=i;
break;
}
}
if(index==-1){
alert("缓存已满！请先清除缓存。");
}else{
varwidth=myKeep[index].offsetWidth;
myKeep[index].innerHTML="<img
src="+url+"width="+width+"\>";
}
}
4.清空右侧缓存区域：
<inputclass="rightButton"type="button"value="清空"onclick="clearKeep()"/>
functionclearKeep(){
varmyKeep=document.getElementsByClassName("divKeep");
for(vari=0;i<myKeep.length;i++){
myKeep[i].innerHTML="";
}
}
5．开始画图：
onload=function(){
canvas=document.getElementById("can");
context=canvas.getContext("2d");
varx;
vary;
varwrite=false;
document.onmousemove=function(e){
x=e.clientX;
y=e.clientY-100;
};
canvas.onmousedown=function(e){
varcolor="red";
varlineWidth="1";
switch(pan){
case0:
color="red";
break;
case1:
color="green";
break;
case2:
color="blue";
break;
}
switch(line){
case0:
lineWidth="1";
break;
case1:
lineWidth="4";
break;
case2:
lineWidth="7";
break;
}
context.closePath();
context.beginPath();
context.moveTo(x,y);
context.strokeStyle=color;
context.lineWidth=lineWidth;
write=true;
};
canvas.onmousemove=function(e){
if(write){
context.lineTo(x,y);
context.stroke();
}
};
document.onmouseup=function(e){
write=false;
}
};
③、保存画布上的图，到旁边的缓存区
④、清空画布
⑤、清空缓存区
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#can{
border:2px
solidred;
position:absolute;
left:0;
top:100px;
cursor:url("img/p1.png")048,auto;
}
.content{
margin-top:10px;
}
.header{
height:50px;
margin:10px;
}
.headerimg{
cursor:pointer;
}
.pan{
border:1px
solidtransparent;
}
.choosePan{
border:1px
solidred;
}
.lineWidth{
border:1px
solidtransparent;
}
.chooseLineWidth{
border:1px
solidred;
}
.left,.right{
width:200px;
display:inline;
margin-right:150px;
}
.body{
width:1100px;
}
.show{
width:550px;
height:500px;
float:right;
}
.showdiv{
width:160px;
height:160px;
margin:60px10px0
10px;
border:1px
solidblack;
float:left;
}
input{
width:80px;
height:30px;
}
.rightButton{
margin:15px;
float:right;
}
</style>
<script>
varcanvas;
varcontext;
varpan;
varline;
onload=function(){
canvas=document.getElementById("can");
context=canvas.getContext("2d");
varx;
vary;
varwrite=false;
document.onmousemove=function(e){
x=e.clientX;
y=e.clientY-100;
};
canvas.onmousedown=function(e){
varcolor="red";
varlineWidth="1";
switch(pan){
case0:
color="red";
break;
case1:
color="green";
break;
case2:
color="blue";
break;
}
switch(line){
case0:
lineWidth="1";
break;
case1:
lineWidth="4";
break;
case2:
lineWidth="7";
break;
}
context.closePath();
context.beginPath();
context.moveTo(x,y);
context.strokeStyle=color;
context.lineWidth=lineWidth;
write=true;
};
canvas.onmousemove=function(e){
if(write){
context.lineTo(x,y);
context.stroke();
}
};
document.onmouseup=function(e){
write=false;
}
};
functionchoosePan(cell,index){
pan=index;
switch(pan){
case0:
canvas.style.cursor="url('img/p1.png')
048,auto";
break;
case1:
canvas.style.cursor="url('img/p2.gif')
048,auto";
break;
case2:
canvas.style.cursor="url('img/p3.gif')
048,auto";
break;
}
clearPan();
cell.className="choosePan";
}
functionclearPan(){
varpans=document.getElementsByClassName("choosePan");
for(vari=0;i<pans.length;i++){
pans[i].className="pan";
}
}
functionchooseLineWidth(cell,index){
line=index;
clearLineWidth();
cell.className="chooseLineWidth";
}
functionclearLineWidth(){
varpans=document.getElementsByClassName("chooseLineWidth");
for(vari=0;i<pans.length;i++){
pans[i].className="lineWidth";
}
}
functionclearCanvas(){
context.strokeStyle="white";
context.clearRect(0,0,500,500);
}
functionkeep(){
varurl=canvas.toDataURL();
varmyKeep=document.getElementsByClassName("divKeep");
varindex=-1;
for(vari=0;i<myKeep.length;i++){
if(!myKeep[i].innerHTML){
index=i;
break;
}
}
if(index==-1){
alert("缓存已满！请先清除缓存。");
}else{
varwidth=myKeep[index].offsetWidth;
myKeep[index].innerHTML="<img
src="+url+"width="+width+"\>";
}
}
functionclearKeep(){
varmyKeep=document.getElementsByClassName("divKeep");
for(vari=0;i<myKeep.length;i++){
myKeep[i].innerHTML="";
}
}
</script>
</head>
<body>
<divclass="content">
<divclass="header">
<divclass="left">
<imgclass="choosePan"src="img/p1.png"onclick="choosePan(this,0)"/>
<imgclass="pan"src="img/p2.gif"onclick="choosePan(this,1)"/>
<imgclass="pan"src="img/p3.gif"onclick="choosePan(this,2)"/>
</div>
<divclass="right">
<imgclass="chooseLineWidth"src="img/w3.png"onclick="chooseLineWidth(this,0)"/>
<imgclass="lineWidth"src="img/w2.gif"onclick="chooseLineWidth(this,1)"/>
<imgclass="lineWidth"src="img/w1.gif"onclick="chooseLineWidth(this,2)"/>
</div>
</div>
<divclass="body">
<canvasid="can"height="500"width="500"></canvas>
<divclass="show">
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<inputclass="rightButton"type="button"value="清空"onclick="clearKeep()"/>
</div>
</div>
<divclass="footer">
<inputtype="button"value="保存"onclick="keep()"/>
<inputtype="button"value="清空"onclick="clearCanvas()"/>
</div>
</div>
</body>
</html>
到目前为止，完成了画图的基本功能，而且简单易使用。
1概述
随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。
2效果图如下：
3主要功能
支持选择画笔的颜色
支持选择画笔的线条粗细
4实现方式
首先，我们需要一个容器，来将我的画图工具放入网页中
<divclass="content">
然后我们要进行布局，布局详细如下，大体分为header、body、footer三部分：
<divclass="header">
<divclass="left">
<imgclass="choosePan"src="img/p1.png"/>
<imgclass="pan"src="img/p2.gif"/>
<imgclass="pan"src="img/p3.gif"/>
</div>
<divclass="right">
<imgclass="chooseLineWidth"src="img/w3.png"/>
<imgclass="lineWidth"src="img/w2.gif"/>
<imgclass="lineWidth"src="img/w1.gif"/>
</div>
</div>
<divclass="body">
<canvasid="can"height="500"width="500"></canvas>
<divclass="show">
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<inputclass="rightButton"type="button"value="清空"/>
</div>
</div>
<divclass="footer">
<inputtype="button"value="保存"/>
<inputtype="button"value="清空"/>
</div>
接着就是添加方法和事件：
1.选择笔的方法：
//这里传参，0表示第一个笔，1表示第二个笔….
<imgclass="choosePan"src="img/p1.png"onclick="choosePan(this,0)"/>
<imgclass="pan"src="img/p2.gif"onclick="choosePan(this,1)"/>
<imgclass="pan"src="img/p3.gif"onclick="choosePan(this,2)"/>
//选择笔：
functionchoosePan(cell,index){
pan=index;
//改变鼠标的样式（这里可以单独拿出一个方法，此处为了简略）
switch(pan){
case0:
canvas.style.cursor="url('img/p1.png')
048,auto";
break;
case1:
canvas.style.cursor="url('img/p2.gif')
048,auto";
break;
case2:
canvas.style.cursor="url('img/p3.gif')
048,auto";
break;
}
//清除笔的颜色
clearPan();
//选择笔的颜色
cell.className="choosePan";
}
functionclearPan(){
varpans=document.getElementsByClassName("choosePan");
for(vari=0;i<pans.length;i++){
pans[i].className="pan";
}
}
2.选择线条的粗细：
参数同上
<imgclass="chooseLineWidth"src="img/w3.png"onclick="chooseLineWidth(this,0)"/>
<imgclass="lineWidth"src="img/w2.gif"onclick="chooseLineWidth(this,1)"/>
<imgclass="lineWidth"src="img/w1.gif"onclick="chooseLineWidth(this,2)"/>
functionchooseLineWidth(cell,index){
line=index;
clearLineWidth();
cell.className="chooseLineWidth";
}
functionclearLineWidth(){
varpans=document.getElementsByClassName("chooseLineWidth");
for(vari=0;i<pans.length;i++){
pans[i].className="lineWidth";
}
}
3.保存和清空画布：
<inputtype="button"value="保存"onclick="keep()"/>
<inputtype="button"value="清空"onclick="clearCanvas()"/>
functionclearCanvas(){
context.strokeStyle="white";
context.clearRect(0,0,500,500);
}
functionkeep(){
varurl=canvas.toDataURL();
varmyKeep=document.getElementsByClassName("divKeep");
varindex=-1;
for(vari=0;i<myKeep.length;i++){
if(!myKeep[i].innerHTML){
index=i;
break;
}
}
if(index==-1){
alert("缓存已满！请先清除缓存。");
}else{
varwidth=myKeep[index].offsetWidth;
myKeep[index].innerHTML="<img
src="+url+"width="+width+"\>";
}
}
4.清空右侧缓存区域：
<inputclass="rightButton"type="button"value="清空"onclick="clearKeep()"/>
functionclearKeep(){
varmyKeep=document.getElementsByClassName("divKeep");
for(vari=0;i<myKeep.length;i++){
myKeep[i].innerHTML="";
}
}
5．开始画图：
onload=function(){
canvas=document.getElementById("can");
context=canvas.getContext("2d");
varx;
vary;
varwrite=false;
document.onmousemove=function(e){
x=e.clientX;
y=e.clientY-100;
};
canvas.onmousedown=function(e){
varcolor="red";
varlineWidth="1";
switch(pan){
case0:
color="red";
break;
case1:
color="green";
break;
case2:
color="blue";
break;
}
switch(line){
case0:
lineWidth="1";
break;
case1:
lineWidth="4";
break;
case2:
lineWidth="7";
break;
}
context.closePath();
context.beginPath();
context.moveTo(x,y);
context.strokeStyle=color;
context.lineWidth=lineWidth;
write=true;
};
canvas.onmousemove=function(e){
if(write){
context.lineTo(x,y);
context.stroke();
}
};
document.onmouseup=function(e){
write=false;
}
};
5.主要思路分析：
①、首先如果想在画布上画出线条，我们需要知道笔（鼠标）的位置信息，所以可以进入画布在记录，也可以当鼠标进入网页就开始记录，需要用到onmousemove
②、其次是需要按下鼠标拖动时开始画图，松开鼠标停止画图，所以需要有一个开关来控制鼠标，取一个布尔变量就可以，同时需要用到onmousedown，onmousemove，onmouseup事件
③、保存画布上的图，到旁边的缓存区
④、清空画布
⑤、清空缓存区
6.全部代码如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#can{
border:2px
solidred;
position:absolute;
left:0;
top:100px;
cursor:url("img/p1.png")048,auto;
}
.content{
margin-top:10px;
}
.header{
height:50px;
margin:10px;
}
.headerimg{
cursor:pointer;
}
.pan{
border:1px
solidtransparent;
}
.choosePan{
border:1px
solidred;
}
.lineWidth{
border:1px
solidtransparent;
}
.chooseLineWidth{
border:1px
solidred;
}
.left,.right{
width:200px;
display:inline;
margin-right:150px;
}
.body{
width:1100px;
}
.show{
width:550px;
height:500px;
float:right;
}
.showdiv{
width:160px;
height:160px;
margin:60px10px0
10px;
border:1px
solidblack;
float:left;
}
input{
width:80px;
height:30px;
}
.rightButton{
margin:15px;
float:right;
}
</style>
<script>
varcanvas;
varcontext;
varpan;
varline;
onload=function(){
canvas=document.getElementById("can");
context=canvas.getContext("2d");
varx;
vary;
varwrite=false;
document.onmousemove=function(e){
x=e.clientX;
y=e.clientY-100;
};
canvas.onmousedown=function(e){
varcolor="red";
varlineWidth="1";
switch(pan){
case0:
color="red";
break;
case1:
color="green";
break;
case2:
color="blue";
break;
}
switch(line){
case0:
lineWidth="1";
break;
case1:
lineWidth="4";
break;
case2:
lineWidth="7";
break;
}
context.closePath();
context.beginPath();
context.moveTo(x,y);
context.strokeStyle=color;
context.lineWidth=lineWidth;
write=true;
};
canvas.onmousemove=function(e){
if(write){
context.lineTo(x,y);
context.stroke();
}
};
document.onmouseup=function(e){
write=false;
}
};
functionchoosePan(cell,index){
pan=index;
switch(pan){
case0:
canvas.style.cursor="url('img/p1.png')
048,auto";
break;
case1:
canvas.style.cursor="url('img/p2.gif')
048,auto";
break;
case2:
canvas.style.cursor="url('img/p3.gif')
048,auto";
break;
}
clearPan();
cell.className="choosePan";
}
functionclearPan(){
varpans=document.getElementsByClassName("choosePan");
for(vari=0;i<pans.length;i++){
pans[i].className="pan";
}
}
functionchooseLineWidth(cell,index){
line=index;
clearLineWidth();
cell.className="chooseLineWidth";
}
functionclearLineWidth(){
varpans=document.getElementsByClassName("chooseLineWidth");
for(vari=0;i<pans.length;i++){
pans[i].className="lineWidth";
}
}
functionclearCanvas(){
context.strokeStyle="white";
context.clearRect(0,0,500,500);
}
functionkeep(){
varurl=canvas.toDataURL();
varmyKeep=document.getElementsByClassName("divKeep");
varindex=-1;
for(vari=0;i<myKeep.length;i++){
if(!myKeep[i].innerHTML){
index=i;
break;
}
}
if(index==-1){
alert("缓存已满！请先清除缓存。");
}else{
varwidth=myKeep[index].offsetWidth;
myKeep[index].innerHTML="<img
src="+url+"width="+width+"\>";
}
}
functionclearKeep(){
varmyKeep=document.getElementsByClassName("divKeep");
for(vari=0;i<myKeep.length;i++){
myKeep[i].innerHTML="";
}
}
</script>
</head>
<body>
<divclass="content">
<divclass="header">
<divclass="left">
<imgclass="choosePan"src="img/p1.png"onclick="choosePan(this,0)"/>
<imgclass="pan"src="img/p2.gif"onclick="choosePan(this,1)"/>
<imgclass="pan"src="img/p3.gif"onclick="choosePan(this,2)"/>
</div>
<divclass="right">
<imgclass="chooseLineWidth"src="img/w3.png"onclick="chooseLineWidth(this,0)"/>
<imgclass="lineWidth"src="img/w2.gif"onclick="chooseLineWidth(this,1)"/>
<imgclass="lineWidth"src="img/w1.gif"onclick="chooseLineWidth(this,2)"/>
</div>
</div>
<divclass="body">
<canvasid="can"height="500"width="500"></canvas>
<divclass="show">
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<divclass="divKeep"></div>
<inputclass="rightButton"type="button"value="清空"onclick="clearKeep()"/>
</div>
</div>
<divclass="footer">
<inputtype="button"value="保存"onclick="keep()"/>
<inputtype="button"value="清空"onclick="clearCanvas()"/>
</div>
</div>
</body>
</html>
到目前为止，完成了画图的基本功能，而且简单易使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- h5 canvas 画图
- 用H5中的Canvas等技术制作海报
- H5上传图片并使用canvas制作海报
- 运用canvas制作简单的画图
- 用H5中的Canvas等技术制作海报
- 用H5中的Canvas等技术制作海报
- 用H5中的Canvas等技术制作海报
- h5 canvas 在canvas上画图 在canvas上写字 文字换行
- html5 canvas 制作画图工具。
- H5上传图片并使用canvas制作海报
- JavaScript操作canvas制作前端H5小游戏——Flappy Bird
- H5中canvas标签制作在线画板
- 使用Canvas制作画图工具
- 神器推荐：应用之星，零代码就能制作炫酷的H5页面
- 玩转html5<canvas>画图
- 玩转html5<canvas>画图
- H5动画，canvas绘制圆环百分比进度的动态效果
- H5是一系列制作网页互动效果的技术集合
- Horizontalscrollview里添加一个布局，该布局里在添加一个自定义的View,为什么View里用Canvas画图无法显示？
- 嗨创H5网页制作工具