效果：

源码：

<!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. httpwebrequest详解

    HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性.这两个类位 于System.Net命名空间,默认情况下这个类对于控制台程 ...

  2. string.match(RegExp) 与 RegExp.exec(string) 深入详解

    string.match(RegExp) 与 RegExp.exec(string) 相同点与不同点对比解析: 1. 这两个方法,如果匹配成功,返回一个数组,匹配失败,返回null. 2. 当RegE ...

  3. 【原创】请避免GO语言中的携程空跑（CPU突然激增）

    其实GO语言从1.6版本开始非常不错了,GC性能优化非常到位,并且各种并行设计比从新实现一套C++版本的确是方便不少. 语言包也很多,库也相对稳定,完全可以适用于生产环境. 本文主要是给刚刚入门新手注 ...

  4. 移动直播app怎么做

    今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,教你从零开始搭建一个完整的iOS直播app,希望能帮助到更多的人更快的了解直播. 了解直播 1 热门直播产品: ...

  5. .NET基础 （09）常用集合和泛型

    常用集合和泛型1 int[]是引用类型还是值类型2 数组之间如何进行转换3 解释泛型的基本原理4 什么是泛型的主要约束和次要约束 常用集合和泛型1 int[]是引用类型还是值类型 数组类型是一族类型, ...

  6. 使用Nmap攻击靶机和使用Wireshark进行嗅探、分析

    使用Nmap攻击靶机和使用Wireshark进行嗅探.分析 在上一次课中已经对Nmap的使用.原理已经做了很多学习,这次的课更多地针对Wireshark进行学习和使用. 使用192.168.200.1 ...

  7. Linux 基础教程 30-tcpdump命令-2

        在上一节讲了一些tcpdump常用功能,本期我们继续学习tcpdump后续功能. 流量过滤     tcpdump不仅支持单个过滤表达式过滤,也还支持多个过滤表达式.但需要注意的是传入的过滤表 ...

  8. 23 DesignPatterns学习笔记：C++语言实现 --- 2.4 Composite

    23 DesignPatterns学习笔记:C++语言实现 --- 2.4 Composite 2016-07-22 (www.cnblogs.com/icmzn) 模式理解

  9. 深海划水队项目--七天冲刺之day7

    站立式会议: 昨天已完成的工作:设置游戏按键,检查重合.检查是否超出边界.检查是否可以下落,方块的硬下落和软下落方法. 今日已完成的工作:添加方法:方块的着陆和消除. 工作中遇到的困难:在消除方块的时 ...

  10. Spring AOP 自定义注解获取http接口及WebService接口入参和出参

    注解方法实现过程中可以采用如下获取方式:—以下为例  HttpServletRequest request = ((ServletRequestAttributes) RequestContextHo ...