用KineticJS设计图形,现在一本站banner为例

canvas源代码如下:

//设置舞台大小
 var stage=new Kinetic.Stage({
            width:611,
            height:193,
            container:container
        });
       //创建层
        var Slayer=new Kinetic.Layer();
       //创建矩形
        var bg=new Kinetic.Rect({
            x:0,
            y:0,
            width:stage.getWidth(),
            height:stage.getHeight(),
            fill:"rgba(20, 5, 63,1)"
        });
        //书写文字
        var title=new Kinetic.Text({
            x:20,
            y:100,
            text:"KineticJS中文社区",
            fill:"black",
            fontSize:42,
            fontFamily:"segoe UI ",
            fill:"white"
        });
        //我们的小标题
        var subTitle=new Kinetic.Text({
            x:20,
            y:150,
            text:"一起用最快捷的方式开发绚丽的Web图形",
            fill:"black",
            fontSize:20,
            fontFamily:"segoe UI",
            fill:"white"
        });
        //编组
        var Lgroup=new Kinetic.Group()
        //下面是画线并填充
        var Lred=new Kinetic.Line({
            points:[180,0,280,0,611,80,611,150],
            fill:"rgba(255, 28, 45,0.9)",
            closed:true
        });

        var Lgreen=new Kinetic.Line({
            points:[510,0,611,30,240,90],
            fill:"rgba(0, 255,50,0.6)",
            closed:true
        });

        var Lblue=new Kinetic.Line({
            points:[370,0,420,0,420,160,370,100],
            fill:"rgba(50, 100,205,0.6)",
            closed:true
        });

       //创建节点数
        Lgroup.add(Lred).add(Lgreen).add(Lblue);
        Slayer.add(bg).add(title).add(subTitle).add(Lgroup);
        stage.add(Slayer);

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。