knova绘制矩形

Posted 2021-01-23 alex-xxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了knova绘制矩形相关的知识，希望对你有一定的参考价值。

效果：

技术分享图片

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Konva绘制矩形</title>
    <script type="text/javascript" src="konva.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    //第一步创建舞台
    var stage = new Konva.Stage({
        container : "container",
        width : window.innerWidth,
        height : window.innerHeight
    });
    //第二部 创建层级
    var layer = new Konva.Layer();

    //第三步，把层添加到舞台上
    stage.add(layer);

    //第四步，创建矩形
    var rect = new Konva.Rect({
        x: 500,
        y: 200,
        opacity: .4,
        rotation: 40,
        width: 100,
        height: 200,
        scaleX: 1.2,
        scaleY: 1.2,
        draggable: true,
        fill: ‘orange‘
    });
    // 第五步： 把 矩形添加到层上去
    layer.add(rect);

    //第六步：把层渲染到舞台上。
    layer.draw();

</script>
</body>
</html>

以上是关于knova绘制矩形的主要内容，如果未能解决你的问题，请参考以下文章

开源项目精选: 基于H5 Canvas的交互框架——Konva

OpenGL随机大小矩形代码更改绘制的矩形

MFC怎么绘制一个圆角矩形

使用shader绘制矩形矩形框圆形圆形框（WebGL-Shader开发基础02）

绘制矩形