效果：

源码：

<!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. Condition Variable使用及其Thread Cancellation线程取消

    条件变量Condition Variable的一般用法: 唤醒用法: struct { pthread_mutex_t mutex; pthread_cond_t cond; //whatever v ...

  2. 前端福利之overflow-scrol 怎么隐藏滚动条(转)

    最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...

  3. C++创建自己的库文件(dll文件创建和编译)

    创建编译库文件有个好处就是不容易被修改,加密的,方便调用,但是缺点是不容易查看其中的内容,反编译比较麻烦.下面让我们使用VC创建编译自己的库文件吧.常用的函数,不常更改的,应该放到库文件里,所以库文件 ...

  4. Android-XML与JSON的理解-JSON的数据格式

    据我了解,在多年以前浏览器客户端和服务器它们的通讯数据交互格式是XML, 使用XML来规定数据格式可读性确实非常强,XML的魅力确实很大,也很成熟,但是也有不足之处,就是在网络传输的时候对流量要求特别 ...

  5. mysql server 自动断开的问题

    今天发现mysql的一个问题,当跑update语句的时候,mysql 服务会自动断掉,无论用 phpmyadmin, navicat , mysql workbench 甚至用 mysql命令行效果一 ...

  6. JAVA环境下利用solrj二次开发SOlR搜索的环境部署常见错误

    问题一:出现控制台坏的响应错误一Bad request 控制台出现错误如下: Bad Request request: http://hostIP:8983/solr/update?wt=javabi ...

  7. 接口IDisposable的用法

    C#的每一个类型都代表一种资源,而资源又分为两类: 托管资源  由CLR管理分配和释放的资源,即从CLR里new出来的对象. 非托管资源  不受CLR管理的对象,如Windows内核对象,或者文件.数 ...

  8. 跨域处理之Jsonp

    一.认识Jsonp JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式 ...

  9. Asp.net Core过滤器

    Asp.net Core五类过滤器:Authorization Filter.Resource Filter.Acton Filter.Exception Filter.Result Filter.优 ...

  10. linux命令之文件备份与压缩命令

    1.tar:打包备份 该命令是将多个命令打包到一起,并且可以实现解压打包.打包是将多个文件或者目录变成一个总的文件,压缩则是将一个大的文件通过压缩算法变成一个小文件. 参数 说明 z(常用) 通过gz ...