canvas绘画板效果 html+css+js

北极光之夜。 发表于 2021/06/09 23:28:44 2021/06/09
【摘要】 一.话不多,先看效果:每天一个小Demo,分享一个有趣的canvas绘画板特效,实现并不难的,学canvas时或者js时拿来练习正正好。come on . 二.实现步骤(可以跟着一步一步书写): 1.先定义html标签:.cintainer是底层盒子,然后下面就是input标签的color对象和range对象,后面再有个canvas标签。<div class="container"> ...

一.话不多,先看效果:

在这里插入图片描述
每天一个小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部分:

window.addEventListener("load",()=>{

    var colour = document.querySelector("#colour");
    var thickness = document.querySelector("#thickness");
    var empty = document.querySelector("#empty");
    var canvas = document.querySelector("#canvas");
    var draw = canvas.getContext('2d');
    var newColor = colour.value;
    var newRange = thickness.value;
    
       canvas.width=window.innerWidth;
       canvas.height=window.innerHeight;

    colour.addEventListener('change',()=>{
        newColor = colour.value;
        console.log(newColor);
        alert('确定改变颜色?');
        temp=0;
    })
    thickness.addEventListener('change',()=>{
        newRange = thickness.value;
    })

    let temp = 0;
    canvas.addEventListener("mousedown", e=>{
        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=>{
        if(temp==1){
            const x =e.pageX;
            const y = e.pageY;
            draw.lineTo(x,y);
            draw.stroke();
        }
    })
    canvas.addEventListener("mouseup",()=>{
        temp = 0;
    })
    
    empty.addEventListener('click',()=>{
        draw.clearRect(0,0,canvas.width,canvas.height);
    })
})

四.总结:

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


生活艰难,加油吧陌生人!

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。