canvas 写字

最新推荐文章于 2024-04-17 17:10:25 发布

90年的罐头�

最新推荐文章于 2024-04-17 17:10:25 发布

阅读量1.2k

点赞数 1

分类专栏： canvas 前端 js html

本文链接：https://blog.csdn.net/weixin_43978604/article/details/102590011

版权

使用 konvas.js 完成 canvas 写字

效果图
bbbfly

思路

使用Konva.js 库详细文档Konva.js
stage 由米字格 layer 和字的 layer 构成
整体字的构成由线段 > 笔划 > 字
每个笔划保存成数组历史记录
使用api 有 Konva.Stage() Konva.Layer() konva.Group() Konva.Line() Node.hide() Node.show() Canvas.toDataURL() .draw()

详细代码

<style>
        #cvs{
            width: 600px;
            height: 600px;
            margin:0 auto;
        }
        .tools{
            padding: 30px;
            width: 600px;
            margin:0 auto;
            display: flex;
            justify-content: space-around;
        }
        .img-list{
            display: flex;
        }
        .img-list img{
            width: 100px;
            height: 100px;
            border:1px solid #ccc;
            margin-right: 10px;
        }
  </style>

<body>
    <div id='cvs'></div>
    <div class="tools">
        <label for="">
            选取颜色：
            <input type="color" id='color-picker'/>

最低0.47元/天解锁文章

90年的罐头�

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas 写字

使用 konvas.js 完成 canvas 写字效果图思路使用Konva.js 库详细文档Konva.jsstage 由米字格 layer 和字的 layer 构成整体字的构成由线段 > 笔划 > 字每个笔划保存成数组历史记录使用api 有 Konva.Stage() Konva.Layer() konva.Group(...
复制链接

扫一扫