使用konva库开发一个矩形


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>13使用konva库开发一个矩形title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    style>
    <script src="lib/js/konva/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,                 //矩形的x坐标,相对其父容器的坐标
        y:100,       
        width:100,             //矩形的宽度
        height:100,            //矩形的高度
        fill:'gold',           //矩形填充的颜色
        stroke:'navy',         //矩形描边的颜色
        strkeWidth:4,         //填充宽度
        opacity:.2,           //矩形的透明度
        scale:1.2,            //矩形的缩放 1:原来大小
        rotation:30,         //旋转的角度,是deg不是弧度
        cornerRadius:10,     //圆角的大小像素
        draggable:true
    });
    //把矩形添加到层
    layer.add(rect);
    //把层渲染到舞台上
    layer.draw();
    script>
body>
html>

使用konva库开发一个矩形_第1张图片

你可能感兴趣的:(07canvas)