使用konva库开发一个矩形

最新推荐文章于 2025-05-28 15:50:41 发布

原创最新推荐文章于 2025-05-28 15:50:41 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

07canvas 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何利用Konva库在Web应用中创建和操作动态的矩形图形，包括设置样式、响应鼠标事件及更新画布等步骤，适合前端开发者学习图形交互技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>13使用konva库开发一个矩形</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
    <script src="lib/js/konva/konva.js"></script>
</head>
<body>
    <div id="container">
    </div>
    <script>
    //第一步：创建舞台
    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:100,                 //矩形的x坐标，相对其父容器的坐标
        y:100,       
        width:100,             //矩形的宽度
        height:100,            //矩形的高度
        fill:'gold',           //矩形填充的颜色
        stroke:'navy',         //矩形描边的颜色
        strkeWidth:4,         //填充宽度
        opacity:.2,           //矩形的透明度
        scale:1.2,            //矩形的缩放 1:原来大小
        rotation:30,         //旋转的角度，是deg不是弧度
        cornerRadius:10,     //圆角的大小像素
        draggable:true
    });
    //把矩形添加到层
    layer.add(rect);
    //把层渲染到舞台上
    layer.draw();
    </script>
</body>
</html>

这里写图片描述