效果：

源码：

<!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绘制矩形的更多相关文章

  1. opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

    前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

  2. canvas 绘制 矩形 圆形

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

    1.矩形 绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形 绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆 根据 ...

  5. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  6. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  7. canvas 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

  8. 在OpenCV中利用鼠标绘制矩形和截取图像的矩形区域

    这是两个相关的程序,前者是后者的基础.实际上前一个程序也是在前面博文的基础上做的修改,请参考<在OpenCV中利用鼠标绘制直线> .下面贴出代码. 程序之一,在OpenCV中利用鼠标绘制矩 ...

  9. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. SSM整合中每一框架需要做的基本操作简述

    1.dao层的工作 pojo和映射文件以及接口(使用逆向工程) SqlMapConfig.xml(Mybaits核心配置文件) ApplicationContext-dao.xml  整合后Sprin ...

  2. PolyCluster: Minimum Fragment Disagreement Clustering for Polyploid Phasing 多聚类:用于多倍体的最小碎片不一致聚类

    摘要 分型是计算生物学的一个新兴领域,在临床决策和生物医学科学中有着重要的应用. 虽然机器学习技术在许多生物医学应用中显示出巨大的潜力,但它们在分型中的用途尚未完全理解. 在本文中,我们研究了基于聚类 ...

  3. numpy中tile()函数

    函数形式: tile(A,rep) 功能:重复A的各个维度 参数类型: - A: Array类的都可以,即A是一个ndarry数组- rep:A沿着各个维度重复的次数,表示变成的矩阵的形状,例如rep ...

  4. B-spline Curves 学习之B样条曲线定义（4）

    B-spline Curves: Definition 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关的翻译学习. (原来博客网址:h ...

  5. 深水划水队项目---七天冲刺之day5

    站立式会议: 因为今天有成员回家,不能进行线下站立式会议,只能线上进行语音聊天 工作进度:  昨天完成的任务: 游戏功能的基本实现 商讨出如何实现游戏中的难度选择功能与道具功能 商讨出站立式会议能线下 ...

  6. Linux中连接mysql执行sql文件

    数据量小的时候可以把sql语句内容粘贴执行,但是文件很大的时候,这样执行效率很慢很慢,需要使用source执行sql文件 1.客户端连接mysql数据库 [root@iZbp1bb2egi7w0uey ...

  7. Java Been, EJB, POJO 之间的区别

    Java Bean 是可复用的组件,对Java Bean并没有严格的规范,理论上讲,任何一个Java类都可以是一个Bean.但通常情况下,由于Java Bean是被容器所创建(如Tomcat)的,所以 ...

  8. 字体变色详解链接：https://www.cnblogs.com/daofaziran/p/9015284.html

    格式:\033[显示方式;前景色;背景色m + 结尾部分:\033[0m 字体色 | 背景色 | 颜色描述 ------------------------------------------- 30 ...

  9. “全栈2019”Java异常第十一章：重写方法时只能抛出父类异常子集

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  10. “全栈2019”Java第一百零五章：匿名内部类覆盖作用域成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...