H5 canvas制作画图

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

1概述

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

2效果图如下：

![Center][]

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表示第二个笔….

//选择笔：

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

**  **           ***canvas***.**style**.**cursor**=**"url('img/p1.png') 0 48,auto"**;  
            **break**;  
        **case**1:  
            ***canvas***.**style**.**cursor**=**"url('img/p2.gif') 0 48,auto"**;  
            **break**;  
        **case**2:  
            ***canvas***.**style**.**cursor**=**"url('img/p3.gif') 0 48,auto"**;  
            **break**;  
    \}

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

//选择笔的颜色  
    cell.**className**=**"choosePan"**;  
\}

**function***clearPan*()\{  
    **var**pans=**document**.getElementsByClassName(**"choosePan"**);  
    **for**(**var**i=0;i<pans.**length**;i\++)\{  
        pans\[i\].**className**=**"pan"**;  
    \}  
\}

2.选择线条的粗细：

参数同上

**function***chooseLineWidth*(cell,index)\{  
    ***line***=index;  
    *clearLineWidth*();  
    cell.**className**=**"chooseLineWidth"**;  
\}  
**function***clearLineWidth*()\{  
    **var**pans=**document**.getElementsByClassName(**"chooseLineWidth"**);  
    **for**(**var**i=0;i<pans.**length**;i\++)\{  
        pans\[i\].**className**=**"lineWidth"**;  
    \}  
\}

3. 保存和清空画布：

1.  <**inputtype="button"value="保存"οnclick="***keep*()**"**/>  
    <**inputtype="button"value="清空"οnclick="***clearCanvas*()**"**/>

**function***clearCanvas*()\{  
    ***context***.**strokeStyle**=**"white"**;  
    ***context***.clearRect(0,0,500,500);  
\}  
  
**function***keep*()\{  
    **var**url=***canvas***.toDataURL();  
    **var**myKeep=**document**.getElementsByClassName(**"divKeep"**);  
    **var**index=-1;  
    **for**(**var**i=0;i<myKeep.**length**;i\++)\{  
        **if**(!myKeep\[i\].**innerHTML**)\{  
            index=i;  
            **break**;  
        \}  
    \}  
    **if**(index==-1)\{  
        alert(**"缓存已满！请先清除缓存。"**);  
    \}**else**\{  
        **var**width=myKeep\[index\].**offsetWidth**;  
        myKeep\[index\].**innerHTML**=**"<img src="**\+url\+**"width="**\+width\+**"\\>"**;  
    \}  
\}

4.清空右侧缓存区域：

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

**function***clearKeep*()\{  
   **var**myKeep=**document**.getElementsByClassName(**"divKeep"**);  
    **for**(**var**i=0;i<myKeep.**length**;i\++)\{  
        myKeep\[i\].**innerHTML**=**""**;  
    \}  
\}

5．  开始画图：

onload=**function**()\{  
    ***canvas***=**document**.getElementById(**"can"**);  
    ***context***=***canvas***.getContext(**"2d"**);  
    **var**x;  
    **var**y;  
    **var**write=**false**;  
    **document**.onmousemove=**function**(e)\{  
        x= e.**clientX**;  
        y= e.**clientY**\-100;  
    \};  
  
    ***canvas***.onmousedown=**function**(e)\{  
        **var**color=**"red"**;  
        **var**lineWidth=**"1"**;  
        **switch**(***pan***)\{  
            **case**0:  
                color=**"red"**;  
                **break**;  
            **case**1:  
                color=**"green"**;  
                **break**;  
            **case**2:  
                color=**"blue"**;  
                **break**;  
        \}  
        **switch**(***line***)\{  
            **case**0:  
                lineWidth=**"1"**;  
                **break**;  
            **case**1:  
                lineWidth=**"4"**;  
                **break**;  
            **case**2:  
                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.    全部代码如下：

<!DOCTYPE**html**>  
<**htmllang="en"**>  
<**head**>  
    <**metacharset="UTF-8"**>  
    <**title**></**title**>  
    <**style**>  
        **\***\{  
            **margin**:0;  
            **padding**:0;  
        \}  
        **\#can**\{  
            **border**:2**px solid red**;  
            **position**:**absolute**;  
            **left**:0;  
            **top**:100**px**;  
            **cursor**:**url**(**"img/p1.png"**)048,**auto**;  
        \}  
        .**content**\{  
            **margin-top**:10**px**;  
        \}  
        .**header**\{  
            **height**:50**px**;  
            **margin**:10**px**;  
        \}  
        .**header img**\{  
            **cursor**:**pointer**;  
        \}  
        .**pan**\{  
            **border**:1**px solid transparent**;  
        \}  
        .**choosePan**\{  
            **border**:1**px solid red**;  
        \}  
        .**lineWidth**\{  
            **border**:1**px solid transparent**;  
        \}  
        .**chooseLineWidth**\{  
            **border**:1**px solid red**;  
        \}  
        .**left**, .**right**\{  
            **width**:200**px**;  
            **display**:**inline**;  
            **margin-right**:150**px**;  
        \}  
  
        .**body**\{  
            **width**:1100**px**;  
        \}  
        .**show**\{  
            **width**:550**px**;  
            **height**:500**px**;  
            **float**:**right**;  
        \}  
        .**show div**\{  
            **width**:160**px**;  
            **height**:160**px**;  
            **margin**:60**px**10**px**0 10**px**;  
            **border**:1**px solid black**;  
            **float**:**left**;  
        \}  
  
        **input**\{  
            **width**:80**px**;  
            **height**:30**px**;  
        \}  
        .**rightButton**\{  
            **margin**:15**px**;  
            **float**:**right**;  
        \}  
    </**style**>  
  
    <**script**>  
        **var*canvas***;  
        **var*context***;  
        **var*pan***;  
        **var*line***;  
  
        onload=**function**()\{  
            ***canvas***=**document**.getElementById(**"can"**);  
            ***context***=***canvas***.getContext(**"2d"**);  
            **var**x;  
            **var**y;  
            **var**write=**false**;  
  
            **document**.onmousemove=**function**(e)\{  
                x= e.**clientX**;  
                y= e.**clientY**\-100;  
            \};  
            ***canvas***.onmousedown=**function**(e)\{  
                **var**color=**"red"**;  
                **var**lineWidth=**"1"**;  
                **switch**(***pan***)\{  
                    **case**0:  
                        color=**"red"**;  
                        **break**;  
                    **case**1:  
                        color=**"green"**;  
                        **break**;  
                    **case**2:  
                        color=**"blue"**;  
                        **break**;  
                \}  
                **switch**(***line***)\{  
                    **case**0:  
                        lineWidth=**"1"**;  
                        **break**;  
                    **case**1:  
                        lineWidth=**"4"**;  
                        **break**;  
                    **case**2:  
                        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**;  
            \}  
        \};  
  
        **function***choosePan*(cell,index)\{  
            ***pan***=index;  
            **switch**(***pan***)\{  
                **case**0:  
                    ***canvas***.**style**.**cursor**=**"url('img/p1.png') 0 48,auto"**;  
                    **break**;  
                **case**1:  
                    ***canvas***.**style**.**cursor**=**"url('img/p2.gif') 0 48,auto"**;  
                    **break**;  
                **case**2:  
                    ***canvas***.**style**.**cursor**=**"url('img/p3.gif') 0 48,auto"**;  
                    **break**;  
            \}  
            *clearPan*();  
            cell.**className**=**"choosePan"**;  
        \}  
        **function***clearPan*()\{  
            **var**pans=**document**.getElementsByClassName(**"choosePan"**);  
            **for**(**var**i=0;i<pans.**length**;i\++)\{  
                pans\[i\].**className**=**"pan"**;  
            \}  
        \}  
        **function***chooseLineWidth*(cell,index)\{  
            ***line***=index;  
            *clearLineWidth*();  
            cell.**className**=**"chooseLineWidth"**;  
        \}  
        **function***clearLineWidth*()\{  
            **var**pans=**document**.getElementsByClassName(**"chooseLineWidth"**);  
            **for**(**var**i=0;i<pans.**length**;i\++)\{  
                pans\[i\].**className**=**"lineWidth"**;  
            \}  
        \}  
  
        **function***clearCanvas*()\{  
            ***context***.**strokeStyle**=**"white"**;  
            ***context***.clearRect(0,0,500,500);  
        \}  
  
        **function***keep*()\{  
            **var**url=***canvas***.toDataURL();  
            **var**myKeep=**document**.getElementsByClassName(**"divKeep"**);  
            **var**index=-1;  
            **for**(**var**i=0;i<myKeep.**length**;i\++)\{  
                **if**(!myKeep\[i\].**innerHTML**)\{  
                    index=i;  
                    **break**;  
                \}  
            \}  
            **if**(index==-1)\{  
                alert(**"缓存已满！请先清除缓存。"**);  
            \}**else**\{  
                **var**width=myKeep\[index\].**offsetWidth**;  
                myKeep\[index\].**innerHTML**=**"<img src="**\+url\+**"width="**\+width\+**"\\>"**;  
            \}  
        \}  
  
        **function***clearKeep*()\{  
            **var**myKeep=**document**.getElementsByClassName(**"divKeep"**);  
            **for**(**var**i=0;i<myKeep.**length**;i\++)\{  
                myKeep\[i\].**innerHTML**=**""**;  
            \}  
        \}  
  
    </**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**>  
  
        <**divclass="right"**>  
            <**imgclass="chooseLineWidth"src="img/w3.png"οnclick="***chooseLineWidth*(**this**,0)**"**/>  
            <**imgclass="lineWidth"src="img/w2.gif"οnclick="***chooseLineWidth*(**this**,1)**"**/>  
            <**imgclass="lineWidth"src="img/w1.gif"οnclick="***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="清空"οnclick="***clearKeep*()**"**/>  
        </**div**>  
  
    </**div**>  
    <**divclass="footer"**>  
        <**inputtype="button"value="保存"οnclick="***keep*()**"**/>  
        <**inputtype="button"value="清空"οnclick="***clearCanvas*()**"**/>  
    </**div**>  
</**div**>  
  
  
</**body**>  
</**html**>

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

[Center]: /images/20220610/bdeba56928cd43e0a05e0f6319ea9b4b.png