效果：

源码：

<!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. Java Thread系列（二）线程状态

    Java Thread系列(二)线程状态 一.线程的五种状态 新建状态(New):新创建了一个线程对象,尚未启动. 就绪状态(Runnable):也叫可运行状态.线程对象创建后,其他线程调用了该对象的 ...

  2. Java 设计模式系列（四）生成器模式

    Java 设计模式系列(四)生成器模式 生成器模式也称之为建造者模式.将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.demo 1. 生成器模式原理 1.1 生成器模式结构 ...

  3. Weblogic的中的文件上传

    在weblogic中在jsp页面中this.getServletContext().getRealPath("/upload")这样的写法是要报错的在jsp页面总你甚至不能使用th ...

  4. JSP中的一个树型结构

    看方力勋的javaWeb,采用左右值来表示树型结构(就是俺门的多级分类)表结构 页面代码 <%@ page language="java" import="java ...

  5. 如何从官网开始 mongo java

    http://docs.mongodb.org/ecosystem/drivers/ MongoDB Driver Documentation Getting Started Installation ...

  6. Activity ViewPager Fragment框架的生命周期

    1.Fragment的生命周期函数 onAttach.onCreate.onCreateView.onViewCreated.onActivityCreated.onStart.onResume.on ...

  7. 如何注册GitHub

    一.个人介绍 姓名:张志龙 学号:1413042026 班级:网工141 爱好:宅物 能力:c++编程 二.注册 注册GitHub其实很简单 首先我们要做的是打开官网 www.github.com(如 ...

  8. 我的"gethup"（GitHub）注册之旅

    大家好,我叫张琪琪,来自网络工程143(学号1413042062),.平时喜欢运动,也喜欢看电视尤其是动漫.其实对于自己的编程能力没有多大自信,如果看着题目回忆课本内容写下的程序也算的话,那是敲过不少 ...

  9. Lucene教程(四) 索引的更新和删除

    这篇文章是基于上一篇文章来写的,使用的是IndexUtil类,下面的例子不在贴出整个类的内容,只贴出具体的方法内容. 3.5版本: 先写了一个check()方法来查看索引文件的变化:   /**   ...

  10. postgresql的日志实现机制

    1.事务的概念   事务是从实际生活中引入数据库的一个概念,即事务内的操作,要么全做,要么全不做.就像银行转账一样,当从一个帐户转出一部分钱之后,就必须在另一个帐户中存入相同数目的钱,若是转出钱之后, ...