canvas绘画板效果 html+css+js

古城微笑少年丶 2022-10-17 00:36 188阅读 0赞

## 一.话不多，先看效果： ##

![在这里插入图片描述][20210531142455918.gif_pic_center]  
**每天一个小Demo，分享一个有趣的canvas绘画板特效，实现并不难的，学canvas时或者js时拿来练习正正好。come on .**

## 二.实现步骤（可以跟着一步一步书写）： ##

#### 1.先定义html标签： ####

**.cintainer是底层盒子，然后下面就是input标签的color对象和range对象，后面再有个canvas标签。**

<div class="container">
            <div class="item">
                颜色选择：<input type="color" value="#1E90FF" id="colour"> 
            </div>
            <div class="item">
                画笔粗细： <input type="range" value="3" min="1" max="66" id="thickness">
            </div>
            <div class="item">
               <button id="empty">清空绘画板</button>
            </div>
            <div class="item"></div>
            <canvas id="canvas">对不起，您的浏览器不支持canvas</canvas>
            </div>

#### 2.开始css样式部分： ####

（1）.先全局初始化：

*{ 
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "fangsong";
        font-weight: bold;
    }

（2）.底层盒子与其儿子的基本样式：

.container{ 
        position: absolute;
        top: 30px;
        left: 30px;
        width: 250px;
        height: 95px;
        background-image: linear-gradient(135deg,white ,rgb(184, 184, 184));
        box-shadow: inset 3px 3px 6px  rgb(155, 155, 155);
        user-select: none;
    }
    .item{ 
       padding: 5px;
       width: 100%;
       height: 30px;
    }

background-image: linear-gradient 渐变背景色。  
box-shadow: inset 内阴影。  
user-select: none; 文本不可选中。

（3）.画布样式：

#canvas{ 
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1000;
       box-shadow: inset 0 0  5px 5px skyblue;
    }

#### 3.JavaScript部分，先获取标签元素： ####

// 颜色选择
        var colour = document.querySelector("#colour");
        // 粗细选择
        var thickness = document.querySelector("#thickness");
        // 清空画布按钮
        var empty = document.querySelector("#empty");
        // 获取canvas画布
        var canvas = document.querySelector("#canvas");
        var draw = canvas.getContext('2d');

#### 4.初始化基本变量： ####

//画笔当前的颜色
       var newColor = colour.value;
       // 画笔当前的粗细
       var newRange = thickness.value;    
       //canvas画布的宽高
       canvas.width=window.innerWidth;
       canvas.height=window.innerHeight;

#### 5. 改变颜色与画笔粗细事件： ####

colour.addEventListener('change',()=>{ 
            newColor = colour.value;
            // 确定是否改变颜色
            alert('确定改变颜色？');
            temp=0;
        })
          thickness.addEventListener('change',()=>{ 
            newRange = thickness.value;
        })

#### 6. 实现画画功能： ####

// 变量，记录鼠标状态
      let temp = 0;
       //鼠标点下事件
        canvas.addEventListener("mousedown", e=>{ 
        // temp =1
            temp = 1;
            // 获取鼠标位置
            const x =e.clientX;
            const y = e.clientY;
            // 线条颜色
            draw.strokeStyle = newColor;
            //线条宽度
            draw.lineWidth = newRange;
            // 绘制圆形的结束线帽
            draw.lineCap = "round";
            // 开始绘制
            draw.beginPath();
            draw.moveTo(x,y);
        })
        // 鼠标移动事件
        canvas.addEventListener("mousemove",e=>{ 
        // 只有temp==1才触发，就是鼠标点下时
            if(temp==1){ 
            // 获取实时位置
                const x =e.pageX;
                const y = e.pageY;
                // 连线
                draw.lineTo(x,y);
                // 绘制路径
                draw.stroke();
            }
        })
        // 松开鼠标事件，temp=0
        canvas.addEventListener("mouseup",()=>{ 
            temp = 0;
        })

#### 7.清空画板： ####

empty.addEventListener('click',()=>{ 
            draw.clearRect(0,0,canvas.width,canvas.height);
        })

## 三.完整代码： ##

HTML部分：

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>北极光之夜</title>
         <link rel="stylesheet" href="./index.css">
         <script src="./index.js" ></script>
    </head>
    <body>
        <div class="container">
            <div class="item">
                颜色选择：<input type="color" value="#1E90FF" id="colour"> 
            </div>
            <div class="item">
                画笔粗细： <input type="range" value="3" min="1" max="66" id="thickness">
            </div>
            <div class="item">
               <button id="empty">清空绘画板</button>
            </div>
            <div class="item"></div>
            <canvas id="canvas">对不起，您的浏览器不支持canvas</canvas>
            </div>
    </body>
    </html>

CSS部分：

*{ 
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "fangsong";
        font-weight: bold;
    }
    .container{ 
        position: absolute;
        top: 30px;
        left: 30px;
        width: 250px;
        height: 95px;
        background-image: linear-gradient(135deg,white ,rgb(184, 184, 184));
        box-shadow: inset 3px 3px 6px  rgb(155, 155, 155);
        user-select: none;
    }
    .item{ 
       padding: 5px;
       width: 100%;
       height: 30px;
    }
    #canvas{ 
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1000;
        overflow: auto;
       box-shadow: inset 0 0  5px 5px skyblue;
    }

JS部分：

## 四.总结： ##

以上绘画板效果就全部实现了。

--------------------

生活艰难，加油吧陌生人！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

**其它文章~关注我看更多简单创意特效：**  
[文字烟雾效果 html+css+js][html_css_js]  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js 1]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 2]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 3]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 4]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 1]

[20210531142455918.gif_pic_center]: /images/20221014/c82d26bc04a64ddfb9f66acb709fe275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/1a073631575348b7ae6f115ccd155db3.png
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 1]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343