码迷,mamicode.com
首页 > 其他好文 > 详细

05 canvas——Konva简单使用

时间:2017-07-19 23:22:25      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:rip   agg   otto   ora   全屏   div   draggable   add   拖动   

konva使用模板

<title>konva使用模板</title>
    <style>
        body{
            padding: 0;
            margin:0;
            background-color: #f0f0f0;
        }
    </style>
    <script src="bower_components/konva/konva.js"></script>
</head>
<body>
    <!--放我们的舞台-->
    <div id="container">

    </div>
<script>
        //1、创建舞台
        var stage = new Konva.Stage({
            container:‘container‘,//id
            width:window.innerWidth,//全屏
            height:window.innerHeight
        });

        //2、创建一个层
        var layer = new Konva.Layer();

        //3、把层添加到舞台
        stage.add(layer);

        //4、创建一个矩形
        var rect = new Konva.Rect({
            x:100,
            y:100,
            opacity:.4,
            rotation:40,
            height:200,
            width:100,
            scaleX:1.2,
            scaleY:1.2,
            draggable:true,/*可拖动*/
            fill:"orange"
        });

        //5、把矩形添加到层上去
        layer.add(rect);

        //6、把层渲染到舞台
        layer.draw();
    </script>
</body>

05 canvas——Konva简单使用

标签:rip   agg   otto   ora   全屏   div   draggable   add   拖动   

原文地址:http://www.cnblogs.com/suxiaoxia/p/7208463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!