H5 canvas制作画图

我不是女神ヾ 2022-06-10 06:37 413阅读 0赞



1概述

随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。

2效果图如下：

Center

3主要功能

支持选择画笔的颜色

支持选择画笔的线条粗细

4实现方式

首先，我们需要一个容器，来将我的画图工具放入网页中

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

  1. <**divclass="right"**>  
  2.     <**imgclass="chooseLineWidth"src="img/w3.png"**/>  
  3.     <**imgclass="lineWidth"src="img/w2.gif"**/>  
  4.     <**imgclass="lineWidth"src="img/w1.gif"**/>  
  5. </**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. 接着就是添加方法和事件：
  3. 1.选择笔的方法：
  5. //这里传参，0表示第一个笔，1表示第二个笔….
  7. <img class="choosePan" src="img/p1.png" οnclick="choosePan(this,0)"/>
  8.  <img class="pan" src="img/p2.gif" οnclick="choosePan(this,1)"/>
  9.  <img class="pan" src="img/p3.gif" οnclick="choosePan(this,2)"/>
  13.   //选择笔：

function*choosePan(cell,index){
**pan*=index; //改变鼠标的样式（这里可以单独拿出一个方法，此处为了简略） switch(*pan*){ case**0:

canvas.style.cursor=“url(‘img/p1.png’) 0 48,auto”;
break;
case1:
canvas.style.cursor=“url(‘img/p2.gif’) 0 48,auto”;
break;
case2:
canvas.style.cursor=“url(‘img/p3.gif’) 0 48,auto”;
break;
}

//清除笔的颜色
clearPan();

//选择笔的颜色
cell.className=“choosePan”;
}

function*clearPan(){
varpans=document.getElementsByClassName(“choosePan”);
for(vari=0;i<pans.length;i++){
pans[i].className=*”pan”;
}
}

  1. 2.选择线条的粗细：
  3. 参数同上
  5. <img class="chooseLineWidth" src="img/w3.png" οnclick="chooseLineWidth(this,0)"/>
  6.  <img class="lineWidth" src="img/w2.gif" οnclick="chooseLineWidth(this,1)"/>
  7.  <img class="lineWidth" src="img/w1.gif" οnclick="chooseLineWidth(this,2)"/>

function*chooseLineWidth(cell,index){
**line=index; clearLineWidth*();
cell.className=“chooseLineWidth”;
} functionclearLineWidth(){ varpans=document.getElementsByClassName(“chooseLineWidth”); for(vari=0;i<pans.length;i++){
pans[i].className=“lineWidth”**;
}
}

  1. 保存和清空画布：
  1. <inputtype=”button”value=”保存”οnclick=”*keep()“/>
    <inputtype=”button”value=”清空”οnclick=”    clearCanvas()*”/>

function*clearCanvas(){
**context*.strokeStyle=“white”;
*context*.clearRect(0,0,500,500);
}

function*keep(){
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=““**;
}
}

4.清空右侧缓存区域：

  1. <inputclass=”rightButton”type=”button”value=”清空”οnclick=”*clearKeep()*”/>

function*clearKeep(){
varmyKeep=document.getElementsByClassName(“divKeep”);
for(vari=0;i<myKeep.length;i++){
myKeep[i].innerHTML=*””;
}
}

  1.  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;
}; 

  1. ***canvas***.onmousedown=**function**(e)\{  
  2.     **var**color=**"red"**;  
  3.     **var**lineWidth=**"1"**;  
  4.     **switch**(***pan***)\{  
  5.         **case**0:  
  6.             color=**"red"**;  
  7.             **break**;  
  8.         **case**1:  
  9.             color=**"green"**;  
  10.             **break**;  
  11.         **case**2:  
  12.             color=**"blue"**;  
  13.             **break**;  
  14.     \}  
  15.     **switch**(***line***)\{  
  16.         **case**0:  
  17.             lineWidth=**"1"**;  
  18.             **break**;  
  19.         **case**1:  
  20.             lineWidth=**"4"**;  
  21.             **break**;  
  22.         **case**2:  
  23.             lineWidth=**"7"**;  
  24.             **break**;  
  25.     \}  
  27.     ***context***.closePath();  
  28.     ***context***.beginPath();  
  29.     ***context***.moveTo(x,y);  
  30.     ***context***.**strokeStyle**=color;  
  31.     ***context***.**lineWidth**=lineWidth;  
  32.     write=**true**;  
  33. \};  
  34. ***canvas***.onmousemove=**function**(e)\{  
  35.     **if**(write)\{  
  36.         ***context***.lineTo(x,y);  
  37.         ***context***.stroke();  
  38.     \}  
  39. \};  
  40. **document**.onmouseup=**function**(e)\{  
  41.     write=**false**;  
  42. \}

};

  1. 5.    主要思路分析：
  3.       ①、首先如果想在画布上画出线条，我们需要知道笔（鼠标）的位置信息，所以可以进入画布在记录，也可以当鼠标进入网页就开始记录，需要用到onmousemove
  5.       ②、其次是需要按下鼠标拖动时开始画图，松开鼠标停止画图，所以需要有一个开关来控制鼠标，取一个布尔变量就可以，同时需要用到onmousedown，onmousemove，onmouseup事件
  10.           ③、保存画布上的图，到旁边的缓存区
  15.           ④、清空画布
  20.           ⑤、清空缓存区
  30. 6.    全部代码如下：

<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8”>
<title></title>
<style>
*{
margin:0;
padding:0;
}
#can{
border:2px solid red;
position:absolute;
left:0;
top:100px;
cursor:url(“img/p1.png”)048,auto;
}
.content{
margin-top:10px;
}
.header{
height:50px;
margin:10px;
}
.header img{
cursor:pointer;
}
.pan{
border:1px solid transparent;
}
.choosePan{
border:1px solid red;
}
.lineWidth{
border:1px solid transparent;
}
.chooseLineWidth{
border:1px solid red;
}
.left, .right{
width:200px;
display:inline;
margin-right:150px;
} 

  1.     .**body**\{  
  2.         **width**:1100**px**;  
  3.     \}  
  4.     .**show**\{  
  5.         **width**:550**px**;  
  6.         **height**:500**px**;  
  7.         **float**:**right**;  
  8.     \}  
  9.     .**show div**\{  
  10.         **width**:160**px**;  
  11.         **height**:160**px**;  
  12.         **margin**:60**px**10**px**0 10**px**;  
  13.         **border**:1**px solid black**;  
  14.         **float**:**left**;  
  15.     \}  
  17.     **input**\{  
  18.         **width**:80**px**;  
  19.         **height**:30**px**;  
  20.     \}  
  21.     .**rightButton**\{  
  22.         **margin**:15**px**;  
  23.         **float**:**right**;  
  24.     \}  
  25. </**style**>  
  27. <**script**>  
  28.     **var*canvas***;  
  29.     **var*context***;  
  30.     **var*pan***;  
  31.     **var*line***;  
  33.     onload=**function**()\{  
  34.         ***canvas***=**document**.getElementById(**"can"**);  
  35.         ***context***=***canvas***.getContext(**"2d"**);  
  36.         **var**x;  
  37.         **var**y;  
  38.         **var**write=**false**;  
  40.         **document**.onmousemove=**function**(e)\{  
  41.             x= e.**clientX**;  
  42.             y= e.**clientY**\-100;  
  43.         \};  
  44.         ***canvas***.onmousedown=**function**(e)\{  
  45.             **var**color=**"red"**;  
  46.             **var**lineWidth=**"1"**;  
  47.             **switch**(***pan***)\{  
  48.                 **case**0:  
  49.                     color=**"red"**;  
  50.                     **break**;  
  51.                 **case**1:  
  52.                     color=**"green"**;  
  53.                     **break**;  
  54.                 **case**2:  
  55.                     color=**"blue"**;  
  56.                     **break**;  
  57.             \}  
  58.             **switch**(***line***)\{  
  59.                 **case**0:  
  60.                     lineWidth=**"1"**;  
  61.                     **break**;  
  62.                 **case**1:  
  63.                     lineWidth=**"4"**;  
  64.                     **break**;  
  65.                 **case**2:  
  66.                     lineWidth=**"7"**;  
  67.                     **break**;  
  68.             \}  
  70.             ***context***.closePath();  
  71.             ***context***.beginPath();  
  72.             ***context***.moveTo(x,y);  
  73.             ***context***.**strokeStyle**=color;  
  74.             ***context***.**lineWidth**=lineWidth;  
  75.             write=**true**;  
  76.         \};  
  77.         ***canvas***.onmousemove=**function**(e)\{  
  78.             **if**(write)\{  
  79.                 ***context***.lineTo(x,y);  
  80.                 ***context***.stroke();  
  81.             \}  
  82.         \};  
  83.         **document**.onmouseup=**function**(e)\{  
  84.             write=**false**;  
  85.         \}  
  86.     \};  
  88.     **function***choosePan*(cell,index)\{  
  89.         ***pan***=index;  
  90.         **switch**(***pan***)\{  
  91.             **case**0:  
  92.                 ***canvas***.**style**.**cursor**=**"url('img/p1.png') 0 48,auto"**;  
  93.                 **break**;  
  94.             **case**1:  
  95.                 ***canvas***.**style**.**cursor**=**"url('img/p2.gif') 0 48,auto"**;  
  96.                 **break**;  
  97.             **case**2:  
  98.                 ***canvas***.**style**.**cursor**=**"url('img/p3.gif') 0 48,auto"**;  
  99.                 **break**;  
  100.         \}  
  101.         *clearPan*();  
  102.         cell.**className**=**"choosePan"**;  
  103.     \}  
  104.     **function***clearPan*()\{  
  105.         **var**pans=**document**.getElementsByClassName(**"choosePan"**);  
  106.         **for**(**var**i=0;i<pans.**length**;i\++)\{  
  107.             pans\[i\].**className**=**"pan"**;  
  108.         \}  
  109.     \}  
  110.     **function***chooseLineWidth*(cell,index)\{  
  111.         ***line***=index;  
  112.         *clearLineWidth*();  
  113.         cell.**className**=**"chooseLineWidth"**;  
  114.     \}  
  115.     **function***clearLineWidth*()\{  
  116.         **var**pans=**document**.getElementsByClassName(**"chooseLineWidth"**);  
  117.         **for**(**var**i=0;i<pans.**length**;i\++)\{  
  118.             pans\[i\].**className**=**"lineWidth"**;  
  119.         \}  
  120.     \}  
  122.     **function***clearCanvas*()\{  
  123.         ***context***.**strokeStyle**=**"white"**;  
  124.         ***context***.clearRect(0,0,500,500);  
  125.     \}  
  127.     **function***keep*()\{  
  128.         **var**url=***canvas***.toDataURL();  
  129.         **var**myKeep=**document**.getElementsByClassName(**"divKeep"**);  
  130.         **var**index=-1;  
  131.         **for**(**var**i=0;i<myKeep.**length**;i\++)\{  
  132.             **if**(!myKeep\[i\].**innerHTML**)\{  
  133.                 index=i;  
  134.                 **break**;  
  135.             \}  
  136.         \}  
  137.         **if**(index==-1)\{  
  138.             alert(**"缓存已满！请先清除缓存。"**);  
  139.         \}**else**\{  
  140.             **var**width=myKeep\[index\].**offsetWidth**;  
  141.             myKeep\[index\].**innerHTML**=**"<img src="**\+url\+**"width="**\+width\+**"\\>"**;  
  142.         \}  
  143.     \}  
  145.     **function***clearKeep*()\{  
  146.         **var**myKeep=**document**.getElementsByClassName(**"divKeep"**);  
  147.         **for**(**var**i=0;i<myKeep.**length**;i\++)\{  
  148.             myKeep\[i\].**innerHTML**=**""**;  
  149.         \}  
  150.     \}  
  152. </**script**>

</head>
<body>
<divclass=”content”>
<divclass=”header”>
<divclass=”left”>
<imgclass=”choosePan”src=”img/p1.png”οnclick=”*choosePan(this,0)“/>
<imgclass=”pan”src=”img/p2.gif”οnclick=”choosePan(this,1)“/>
<imgclass=”pan”src=”img/p3.gif”οnclick=”choosePan(this,2)“/>
</*div> 

  1.     <**divclass="right"**>  
  2.         <**imgclass="chooseLineWidth"src="img/w3.png"οnclick="***chooseLineWidth*(**this**,0)**"**/>  
  3.         <**imgclass="lineWidth"src="img/w2.gif"οnclick="***chooseLineWidth*(**this**,1)**"**/>  
  4.         <**imgclass="lineWidth"src="img/w1.gif"οnclick="***chooseLineWidth*(**this**,2)**"**/>  
  5.     </**div**>  
  6. </**div**>  
  8. <**divclass="body"**>  
  9.     <**canvasid="can"height="500"width="500"**></**canvas**>  
  10.     <**divclass="show"**>  
  11.         <**divclass="divKeep"**></**div**>  
  12.         <**divclass="divKeep"**></**div**>  
  13.         <**divclass="divKeep"**></**div**>  
  14.         <**divclass="divKeep"**></**div**>  
  15.         <**divclass="divKeep"**></**div**>  
  16.         <**divclass="divKeep"**></**div**>  
  18.         <**inputclass="rightButton"type="button"value="清空"οnclick="***clearKeep*()**"**/>  
  19.     </**div**>  
  21. </**div**>  
  22. <**divclass="footer"**>  
  23.     <**inputtype="button"value="保存"οnclick="***keep*()**"**/>  
  24.     <**inputtype="button"value="清空"οnclick="***clearCanvas*()**"**/>  
  25. </**div**>

</div>

</body>
</html>

到目前为止，完成了画图的基本功能，而且简单易使用。

发表评论

表情：
评论列表 （有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

    相关 H5 canvas制作画图

     1概述   随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canv

    我不是女神ヾ我不是女神ヾ/ 0 赞/ 414 阅读