<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         body {

             padding: 0;

             margin: 0;

             background-color: #f0f0f0;

             overflow: hidden;

         }

     </style>

     <script src="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,

             y:100,

             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>

使用konva来绘制一个矩形的更多相关文章

  1. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  2. Android中使用画笔和画布绘制一个矩形

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  3. c#在pictureBox控件上绘制多个矩形框及删除绘制的矩形框

    在pictureBox上每次只绘制一个矩形框,绘制下一个矩形框时上次绘制的矩形框取消,代码如链接:https://www.cnblogs.com/luxiao/p/5625196.html 在绘制矩形 ...

  4. 绘制一个绿色矩形平面((50, 50)->(350, 350))

    //VS2008+opencv2.4 //绘制一个绿色矩形平面 #include "stdafx.h" #include "highgui.h" #includ ...

  5. iOS----自定义UIView，绘制一个UIView

    绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方 ...

  6. Android中绘制圆角矩形图片及任意形状图片

    圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制成圆角 ...

  7. 使用canvas绘制渐变色矩形和使用按键控制人物移动

    使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...

  8. 转：iOS绘制一个UIView

    绘制一个UIView 绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时 ...

  9. iOS 绘制一个表盘时钟，秒针效果可以“扫秒/游走”

    最近自己 也尝试写了一个表盘时钟,初衷源于等车时候一个老奶奶问时间,我打开手机,时间数字对我来说相对敏感,但是老奶奶是看不清的,我想识别 还是看表盘 老远 看时针分针角度就可以识别当前时间. 于是我想 ...

随机推荐

  1. Springboot UT 引入某些类

    http://www.infoq.com/cn/articles/Unit-Testing-Complete-Integration-Testing-Begins https://segmentfau ...

  2. 新浪微博 使用OAuth2.0调用API

    # -*- coding: cp936 -*- #python 2.7.10 #xiaodeng #新浪微博 使用OAuth2.0调用API #微博开放接口的调用,都需要获取用户的身份认证.目前微博开 ...

  3. 数据库选型之亿级数据量并发访问（MySQL集群）

    刘 勇  Email:lyssym@sina.com 简介 针对实际应用中并发访问MySQL的场景,本文采用多线程对MySQL进行并发读取访问,其中以返回用户所需的数据并显示在终端为测试结束节点,即将 ...

  4. 社区类 App 如何引导用户发帖和产生内容？

    作者:Pmer在路上链接:http://www.zhihu.com/question/25502904/answer/31342246来源:知乎著作权归作者所有,转载请联系作者获得授权. ugc的产出 ...

  5. HDUOJ--Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  6. html导出图片

    有一个神奇的库:html2canvas. 这个库简洁优美,使用方便. 下面先看一个小demo,它需要用到一张图片:haha.jpg. <html> <head> <scr ...

  7. ASP.NET中UrlEncode应该用Uri.EscapeDataString()

    今天,茄子_2008反馈他博客中的“C++”标签失效.检查了一下代码,生成链接时用的是HttpUtility.UrlEncode(url),从链接地址获取标签时用的是HttpUtility.UrlDe ...

  8. oracle中的一些基本概念

    Oracle数据库的物理文件是存储在磁盘上的数据文件.控制文件和日志文件的总称.数据文件和日志文件是数据库中最重要的文件.数据库由若干个表空间组成,表空间由表组成,表由段组成,段由区间组成,区间由数据 ...

  9. webDAV服务的开启以及客户端的上传、下载、删除、新建文件夾、列表的代码(C#)

    windows server 2003开启webDAV服务 1. 启动“IIS管理器”选择“WEB服务扩展”,选择“WEBDAV”的允许按钮启动WEBDAV功能 2.建立一个虚拟目录,对应到一个本地目 ...

  10. gradle平级项目引用

    一.准备1. 新建一个gradle项目cc-core2. 新建一个gradle项目cc-util 二.场景项目cc-core引用项目cc-util 三.配置1. 项目cc-util被引用的项目什么都不 ...