HTML5教程：让我们用JS创建一个绘图APP

只怕想不到 2022-04-03

展开全文

在本文中，我将向您展示如何使用 JavaScript 和 HTML5 Canvas创建绘图/绘图应用程序。

特征：

在Canvas画布上绘画
多种颜色
清除画布
将绘图另存为图像

首先让我们创建一个带有 canvas 元素的 index.html 文件。

<!DOCTYPE html>
<html lang='en'>
<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'>
    <link rel='stylesheet' href='style.css'>
    <title>Linux迷 www.</title>
</head>
<body>
    <canvas id='canvas'></canvas>

    <script src='main.js'></script>
</body>
</html>

现在让我们创建具有基本重置的style.css

*{
    margin: 0;
    padding: 0;
}

最后，我们将创建我们的 main.js，我们将定位我们的画布并将其大小设置为我们的屏幕大小。

const canvas = document.getElementById('canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth

// ctx 是我们画布的上下文
// 我们使用 ctx 在画布上绘制
const ctx = canvas.getContext('2d')

//让我们创建一个矩形用于测试目的
ctx.fillStyle = 'red'
ctx.fillRect(100, 100, 100, 100)

现在，如果我们在浏览器中打开它，我们应该会看到一个红色矩形。

好的，让我们删除这个矩形当使用者移动他的鼠标时我们想要得到鼠标的位置。我们可以使用mousemove事件。

const canvas = document.getElementById('canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth

const ctx = canvas.getContext('2d')

window.addEventListener('mousemove', (e) => {
    console.log('Mouse X: ' + e.clientX)
    console.log('Mouse Y: ' + e.clientY)
})

现在我们还需要跟踪上一个鼠标位置，并从上一个鼠标位置到当前鼠标位置画一条线。

const canvas = document.getElementById('canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth

const ctx = canvas.getContext('2d')

// 以前的鼠标位置
// 它们最初将为空
let prevX = null
let prevY = null

// 线条应该有多粗
ctx.lineWidth = 5

window.addEventListener('mousemove', (e) => {
    // 最初之前的鼠标位置是null
    //所以我们不能画一条线
    if(prevX == null || prevY == null){
        // Set the previous mouse positions to the current mouse positions
        prevX = e.clientX
        prevY = e.clientY
        return
    } 

    //当前鼠标位置
    let currentX = e.clientX
    let currentY = e.clientY

    // 从上一个鼠标位置到当前鼠标位置画一条线
    ctx.beginPath()
    ctx.moveTo(prevX, prevY)
    ctx.lineTo(currentX, currentY)
    ctx.stroke()

    // 更新之前的鼠标位置
    prevX = currentX
    prevY = currentY
})

现在，如果您移动鼠标，您将看到将绘制一条线。但我们不希望这条线不受控制地绘制。所以我们将声明一个变量let draw = false。我们将只绘制draw 是 true。

所以我们可以监听mousedown和mouseup事件。并设置draw为true用户按下鼠标时和false释放鼠标时。

const canvas = document.getElementById('canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth

const ctx = canvas.getContext('2d')

let prevX = null
let prevY = null

ctx.lineWidth = 5

let draw = false

// 按下鼠标时将 draw 设置为 true
window.addEventListener('mousedown', (e) => draw = true)
// 释放鼠标时将 draw 设置为 false
window.addEventListener('mouseup', (e) => draw = false)

window.addEventListener('mousemove', (e) => {
    // 如果 draw 是  false，那么我们不会绘制
    if(prevX == null || prevY == null || !draw){
        prevX = e.clientX
        prevY = e.clientY
        return
    }

    let currentX = e.clientX
    let currentY = e.clientY

    ctx.beginPath()
    ctx.moveTo(prevX, prevY)
    ctx.lineTo(currentX, currentY)
    ctx.stroke()

    prevX = currentX
    prevY = currentY
})

太棒了！现在让我们在 HTML 中添加一些按钮来更改颜色、清除画布和保存绘图。

<!DOCTYPE html>
<html lang='en'>
<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'>
    <link rel='stylesheet' href='style.css'>
    <title>Linux迷 www.</title>
</head>
<body>
    <canvas id='canvas'></canvas>
    <div class='nav'>
        <!-- We will be accessing the data-clr in JavaScript -->
        <div class='clr' data-clr='#000'></div>
        <div class='clr' data-clr='#EF626C'></div>
        <div class='clr' data-clr='#fdec03'></div>
        <div class='clr' data-clr='#24d102'></div>
        <div class='clr' data-clr='#fff'></div>
        <button class='clear'>clear</button>
        <button class='save'>save</button>
    </div>

    <script src='main.js'></script>
</body>
</html>

我们还需要在我们的 css 中设置它们的样式。

*{
    margin: 0;
    padding: 0;
}

.nav{
    width: 310px;
    height: 50px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    opacity: .3;
    transition: opacity .5s;
}
.nav:hover{
    opacity: 1;
}

.clr{
    height: 30px;
    width: 30px;
    background-color: blue;
    border-radius: 50%;
    border: 3px solid rgb(214, 214, 214);
    transition: transform .5s;
}
.clr:hover{
    transform: scale(1.2);
}
.clr:nth-child(1){
    background-color: #000;
}
.clr:nth-child(2){
    background-color: #EF626C;
}
.clr:nth-child(3){
    background-color: #fdec03;
}
.clr:nth-child(4){
    background-color: #24d102;
}
.clr:nth-child(5){
    background-color: #fff;
}

button{
    border: none;
    outline: none;
    padding: .6em 1em;
    border-radius: 3px;
    background-color: #03bb56;
    color: #fff;
}
.save{
    background-color: #0f65d4;
}