canvas 实现画板(2021/5/10)

最新推荐文章于 2023-11-01 19:51:12 发布

叶川飞流

最新推荐文章于 2023-11-01 19:51:12 发布

阅读量114

点赞数

分类专栏： canvas学习

本文链接：https://blog.csdn.net/weixin_41033048/article/details/116615762

版权

canvas学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

将画笔功能:能够拖动鼠标在页面内绘图，能够设置画笔的粗细，设置画笔的颜色
能够在任意位置绘制圆形:拖动鼠标即可随意在任意位置绘制圆形，并且可以随意定制大小
能在任意位置绘制出矩形:拖动鼠标即可随意在任意位置绘制矩形，并且可以随意定制大小

<!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">
        <title>canvas 实现画板</title>
        <style>
                *{margin: 0;padding: 0;box-sizing: border-box;}
                body{width: 100vw; height: 100vh; display: flex;flex-direction: column;justify-items: flex-start;}
                .caidan{height: 100px;width: 100vw;display: flex;border-bottom: 3px solid #ccc;justify-content: space-around; align-items: center;}
                #canvas{flex:1;width: 100vw;}
                .btn{width: 150px; height: 50px; border: 1px solid #CCC; border-radius: 20px; text-align: center; line-height: 50px;color: #ccc;}
        </style>
</head>
<body>
        <div class="caidan">
                <div class="btn">画笔</div>
                <div class="btn">矩形</div>
                <div class="btn">圆形</div>
                <div class="btn">线段粗细</div>
                <div class="btn">画笔颜色</div>
        </div>
        <canvas id="canvas"></canvas> <!--画板的宽度，高度通过js来获取实时的-->
        <script>
                var canvas = document.querySelector('#canvas')
                canvas.setAttribute('width',canvas.offsetWidth)
                canvas.setAttribute('height',canvas.offsetHeight)
        </script>
</body>
</html>

叶川飞流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 实现画板(2021/5/10)

将画笔功能:能够拖动鼠标在页面内绘图，能够设置画笔的粗细，设置画笔的颜色能够在任意位置绘制圆形:拖动鼠标即可随意在任意位置绘制圆形，并且可以随意定制大小能在任意位置绘制出矩形:拖动鼠标即可随意在任意位置绘制矩形，并且可以随意定制大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat.
复制链接

扫一扫