day22-Drawing App（绘图应用程序）

格式化小拓

已于 2023-07-16 20:48:37 修改

阅读量41

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

于 2023-07-15 20:33:50 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131743762

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day22-Drawing App（绘图应用程序）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drawing App</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!--  Canvas是一个用于绘制图形、动画和其他可视化效果的元素。它提供了一个可以通过JavaScript来操作的二维绘图环境。-->
    <canvas id="canvas" width="800" height="600"></canvas>
    <!-- 工具箱 -->
    <div class="toolbox">
        <button id="decrease">-</button>
        <!-- 线条粗细 -->
        <span id="size">10</span>
        <button id="increase">+</button>
        <!--  颜色-->
        <input type="color" id="color">
        <!-- 清除绘画区域 -->
        <button id="clear">X</button>
    </div>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: url('https://source.unsplash.com/random') no-repeat center/cover;
    font-family: 'Roboto', sans-serif;
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

/* 画布 */
canvas {
    background-color: white;
    border: 2px solid black;
    border-radius: 10px 10px 0 0;
}

/* 工具箱 */
.toolbox {
    background-color: transparent;
    border: 1px solid black;
    border-radius: 0 0 10px 10px;
    display: flex;
    width: 804px;
    padding: 1rem;
}

.toolbox>* {
    background-color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    height: 40px;
    width: 40px;
    margin: 0.25rem;
    padding: 0.25rem;
    cursor: pointer;
}

/* 置于左边 */
.toolbox>*:last-child {
    margin-left: auto;
}

script.js

// 重点是 flex canvas 的应用

// 1.获取元素节点
const canvas = document.getElementById('canvas');//画布
const increaseBtn = document.getElementById('increase');//+
const decreaseBtn = document.getElementById('decrease');//-
const sizeEL = document.getElementById('size');//画笔粗细
const colorEl = document.getElementById('color');//颜色选择器
const clearEl = document.getElementById('clear');//清除按钮
// Canvas 元素的方法，用于获取一个二维绘图的上下文对象。参数 '2d' 表示我们想要获取的是一个二维绘图上下文。在 HTML5 中，只有 '2d' 上下文是必须支持的，因此这是最常见和最常用的选项。
const ctx = canvas.getContext('2d');

let size = 10
let isPressed = false
colorEl.value = 'black'
let color = colorEl.value
let x
let y
// 当鼠标在 Canvas 上按下时，会将 isPressed 设置为 true，并记录鼠标相对canvas的按下的位置。
canvas.addEventListener('mousedown', (e) => {
    isPressed = true
    x = e.offsetX
    y = e.offsetY
})
// 当鼠标在 Canvas 上弹起时，会将 isPressed 设置为 false，并记录x,y置为undefined
canvas.addEventListener('mouseup', (e) => {
    isPressed = false

    x = undefined
    y = undefined
})
// 当鼠标在 Canvas 上移动时
canvas.addEventListener('mousemove', (e) => {
    if (isPressed) {
        const x2 = e.offsetX
        const y2 = e.offsetY
        // 画圈，此圆就是线条与线条之间紧密融合，而不是一段一段相连，
        drawCircle(x2, y2)
        // 画线
        drawLine(x, y, x2, y2)
        // 需要将新的位置给就位置，才可以连续画线
        x = x2
        y = y2
    }
})
//  Canvas 上绘制一个以(x, y) 为圆心、半径为 size 的圆形，并使用指定的颜色进行填充。
function drawCircle(x, y) {
    ctx.beginPath();
    // 0 和 Math.PI * 2 分别表示起始角度和结束角度，这里是绘制一个完整的圆形。
    ctx.arc(x, y, size, 0, Math.PI * 2)
    ctx.fillStyle = color
    ctx.fill()
}
// 可以在 Canvas 上绘制一条从 (x1, y1) 到 (x2, y2) 的直线，并使用指定的颜色和线条宽度进行绘制。
function drawLine(x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.lineWidth = size * 2
    ctx.stroke()
}
// 更新画笔的粗细显示
function updateSizeOnScreen() {
    sizeEL.innerText = size
}
// +
increaseBtn.addEventListener('click', () => {
    size += 5
    if (size > 50) {
        size = 50
    }
    updateSizeOnScreen()
})
// -
decreaseBtn.addEventListener('click', () => {
    size -= 5
    if (size < 5) {
        size = 5
    }
    updateSizeOnScreen()
})
// input颜色的变化
colorEl.addEventListener('change', (e) => color = e.target.value)
// 清除画布原有的绘图痕迹
clearEl.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day22-Drawing App（绘图应用程序）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday22-Drawing App（绘图应用程序）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
复制链接

扫一扫

专栏目录