createJS开发小游戏

效果图:(录屏的时候有点卡)

 

 demo:

https://github.com/beidan/canvas

游戏整体思路实现

1. 实现一个无缝连接的背景图,模拟出汽车在加速的状态

this.backdrop = new createjs.Bitmap(bg);
this.backdrop.x = 0;
this.backdrop.y = 0;
this.stage.addChild(that.backdrop);
this.w = bg.width;
this.h = bg.height;

//创建一个背景副本,无缝连接
var copyy = -bg.height;
this.copy = new createjs.Bitmap(bg);
this.copy.x = 0;
this.copy.y = copyy;  //在画布上y轴的坐标为负的背景图长
//使用createjs的tick函数,逐帧刷新舞台
createjs.Ticker.addEventListener("tick", tick);
function tick(e) {
   if (e.paused !== 1) {
        //舞台逐帧逻辑处理函数
        that.backdrop.y = that.speed + that.backdrop.y;
        that.copy.y = that.speed + that.copy.y;

        if (that.copy.y > -40) {
              that.backdrop.y = that.copy.y + copyy;
        }
        if (that.copy.y > -copyy - 100) {
              that.copy.y = copyy + that.backdrop.y;
        }
        that.stage.update(e);
    }          
}

2. 随机绘制障碍物

由于一条跑道肯定会有很多障碍物,对于超出屏幕的障碍物我们要进行‘资源回收’,否则游戏到后面会越来越卡顿。

// 删除越界的元素
for (var i = 0, flag = true, len = that.props.length; i < len; flag ? i++ : i) {
    if (that.props[i]) {
        if (that.props[i].y > height + 300) {
            that.stage.removeChild(that.props[i]);
            that.props.splice(i, 1);
            flag = false;
        } else {
            flag = true;
        }
    }
}

一共有3条赛道,我们不能出现3个道具同时出现在水平线上,因此我们会随机取1~2个值绘制障碍物。所有游戏我们都应该有参数去控制它的难易程度,免得临上线的时候,老板体验之后觉得游戏太难了……那就非常地尴尬了。 因此,我们会设置加速物体,减速物体,炸弹出现的比例,后期可以调整这个比例来设置游戏的难易程度。

var num = parseInt(2 * Math.random()) + 1, i;
    for (i = 0; i < num; i++) {
        var type = parseInt(10 * Math.random()) + 1;

        // 设置道具出现比例
        if (type == 1) {
            /绘制炸弹
        } else if ((type >= 2) && (type <= 5)) {
            //绘制加速道具
        } else if ((type >= 6) && (type <= 10)) {
            //绘制减速道具
        }
    }

第一次绘制完障碍物之后,会随机时间绘制下一次的障碍物。

var time = (parseInt(3 * Math.random()) + 1);  //随机取1~3整数
// 随机时间绘制障碍物
setTimeout(function () {
    that.propsTmp = [];  //清空
    that.drawObstacle(obj);
}, time * 400);  //400ms ~ 1200ms

 

3.碰撞检测

我们用一个数组来存放汽车占的矩形区域,障碍物占的矩形区域,在每一次tick的时候循环遍历数组,看是否有重叠的,若有重叠,则发生了碰撞。

createjs的一些小知识:

1. 暂停和恢复舞台渲染

createjs.Ticker.addEventListener(“tick”, tick); 
function tick(e) { 
    if (e.paused === 1) { 
    //处理 
    }
}     
createjs.Ticker.paused = 1; //在函数任何地方调用这个,则会暂停tick里面的处理 
createjs.Ticker.paused = 0; //恢复游戏

 

2. 由于汽车会有加速,减速,弹气泡的效果。因此我们把这几个效果绘制在同一个container中,方便统一管理,对这些效果设置name属性,之后可以直接使用getChildByName获取到该对象。

container.name = ‘role’; //设置name值
car = this.stage.getChildByName(“role”);  //使用name值方便获取到该对象

 

3. 预加载 preload (createjs 的 preload 非常的实用)

一开始是自己写的预加载,后来发现createjs里面对图片是有跨域处理的,自己处理跨域的img就比较麻烦,所以直接使用createjs的预加载。

//放置静态资源的数组
var manifest = [
    {src: __uri('./images/car_prop2_tyre@2x.png'), id: 'tyre'}
];
var queue = new createjs.LoadQueue();
queue.on('complete', handleComplete, this);
queue.loadManifest(manifest);
//资源加载成功后,进行处理
function handleComplete() {
   var tyre = queue.getResult('tyre');  //拿到加载成功后的img
}

一般做一个游戏,我们正常都会构建一个游戏类来承载。 下面是一个游戏正常有的接口:

;(function () {
    function CarGame(){}
    CarGame.prototype = {
        init:function(manifest) {
            this.preLoad(manifest);  //资源预加载
            //时间倒计时
            this.prepare(3, 3);  //倒计时3秒
            this.bindEvent(); 
        },
        render:function() {
           this.drawBg(bg1);
           this.drawRole(car, effbomb, effquick);
           this.drawObstacle(obj);
        },
        //在游戏结束的时候批量销毁
        destroy:function(){
            //移除tick事件
            createjs.Ticker.removeEventListener("tick", this.tick);
            //暂停里程,倒计时
            clearInterval(this.changem);
            clearTimeout(this.gametime);
        },
        //由于期间用户可能切出程序进行其他操作,因此都需要一个暂停的接口
        pause:function() {
            //暂停里程,倒计时
            clearInterval(this.changem);
            clearTimeout(this.gametime);

            //暂停页面滚动
            createjs.Ticker.paused = 1;
        },
        //重新开始游戏
        reStart:function(){
           this.destroy();
           this.init(manifest);
        },
        gameOver:function(){
           //显示爆炸效果
           var car = this.stage.getChildByName("role");
           car.getChildByName('bomb').visible = true;
           car.getChildByName('quick').visible = false;
           this.destroy();
        }
    }
})()

 

转载:https://www.cnblogs.com/beidan/p/7122731.html

HTML5声音引擎Howler.js简介

Howler.js是一个不错的HTML5声音引擎。功能强大,性能不错,用起来也很方便。

1. 官网

https://howlerjs.com/ 其代码托管在GitHub上。

2. 兼容性

Howler默认使用Web Audio,但在IE上可以自动转为HTML 5 Audio。这点很是贴心。

3. 声音激活

移动端的Safari和Chrome都禁止网页自动播放声音,必须通过用户的操作,touch, click等触发。Howler可以设置成自动捕捉用户操作激活(解禁)声音播放。

createJS实现复杂网页动画

我应该什么时候用createjs?

如果只是简单动画,建议使用css3或者animate.css这个库就可以了。
当需要开发复杂交互逻辑,例如问答游戏,打蚊子之类的小游戏,或者一些需要复杂图形/线条变换的页面,可以使用createjs完成。

EASELJS、TWEENJS、SOUNDJS、PRELOADJS都是什么?

EASELJS:一个JavaScript库,使HTML5 Canvas标签变得更简单。
用于创建游戏,生成艺术作品,和处理其他高级图形化等有着很友好的体验。(用来方便在页面上绘制元素的)

TWEENJS:TweenJS类库主要用来调整和动画HTML5和Javascript属性, 提供了简单并且强大的tweening接口。(用来做动画效果的)

SOUNDJS:SoundJS提供了简单而强大的API来处理音频。 通过插件来执行实际的音频实现,简单直接的处理声音。(用来控制音频播放的)

PRELOADJS:PreloadJS是一个用来管理和协调相关资源加载的类库, 它可以方便的帮助你预先加载相关资源。(资源预加载)

效果:

6276836-5d7746fc97948ee3

源码分析

打开src/index.html 引入createjs和swiperjs(用于实现页面切换)

<script src="libs/js/swiper.min.js"></script>
<script src="libs/js/createjs-2015.11.26.min.js"></script>
<script src="js/main.js"></script>

main.js主要页面逻辑片段

以下代码是swiper初始化代码,监听onSlideChangeEnd事件,防止页面多次渲染。

var hasSlidePage = [] // 存储已经看过的页面,用于防止页面反复渲染
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: '.swiper-pagination',
  mousewheelControl: true,
  touchRatio: 0.5,
  onSlideChangeEnd: function (swiper) {
    if (hasSlidePage.indexOf(swiper.activeIndex) > -1) {
      return
    }
    hasSlidePage.push(swiper.activeIndex)
    switch (swiper.activeIndex) {
      case 1:
        renderPage2()
    }
  }
})

使用preload预加载资源

// 加载资源
function loadAssest() {
  // 加载资源列表
  manifest = [
    { src: "clearLight/blue.png", id: "blue" }
    ... //此处省略
  ]
  // 统计加载进度
  var loadCount = 0
  preload = new createjs.LoadQueue(false, "./images/");
  // 每加载成功一个资源回调一次
  preload.on("fileload", function (event) {
    loadCount++
    document.querySelector("#process").innerHTML = (loadCount * 100 / manifest.length).toFixed(0) + '%'
  })
  // 所有资源加载完毕后的回调
  preload.on('complete', function (event) {
    // 隐藏加载层,显示内容层
    document.querySelector(".loading-cover").style.display = 'none'
    document.querySelector(".swiper-container").style.display = "block"
    // 渲染第一个页面
    renderPage1()
  })
  // 使用preload预加载指定资源
  preload.loadManifest(manifest)
}

第一个页面绘制代码

// 绘制第一页
function renderPage1() {
  // 创建画布
  var canvas = document.getElementById("canvas1")
  var stage = new createjs.Stage(canvas)
  // 由于添加元素后需要手动更新画布,比较麻烦,该防范监听tick事件,进行自动更新
  createjs.Ticker.addEventListener("tick", handleTicker);
  function handleTicker() {
    stage.update();
  }
  // 在画布添加元素
  var title = this.createText(stage, "超浓缩", "normal 80px microsoft yahei", "#fff", 40, 40)
  // 不知道为什么中文不能自动换行,英文是可以的,所以中文用\n进行换行
  var subTitle1 = this.createText(stage, "·科技突破,高能量配方,活性物浓度高达47%,是普通洗衣液\n的三倍以上,获得「浓缩+」洗衣液认证", "normal 24px microsoft yahei", "#fff", 40, 160)
  var subTitle2 = this.createText(stage, "·一泵8g洗8件,小体积,大能量,660g=2.2kg,用量减少\n70%以上", "normal 24px microsoft yahei", "#fff", 40, 240)
  var logo = this.createImage(stage, 'superEnrichment/logo', 116, 83, 320, 60)
  var bigPower = this.createImage(stage, 'big_power', 163, 154, 40, 320)
  var concentration = this.createImage(stage, 'concentration', 230, 154, 250, 320)
  var bottom = this.createImage(stage, 'bottom', 600, 360, 75, 800)
  var waterDrop = this.createImage(stage,'water_drop', 300, 350, 223, 600)
  var light_line_long = this.createImage(stage,'light_line_long', 23, 300, 110, 670)
  var light_line_long2 = this.createImage(stage,'light_line_long', 23, 300, 365, 810)
  var light_line_long3 = this.createImage(stage,'light_line_long', 23, 300, 620, 670)

  // 对元素设置淡出动画
  createjs.Tween.get(title).to({ alpha: 1 }, 300)
  createjs.Tween.get(subTitle1).to({ alpha: 1 }, 300)
  createjs.Tween.get(subTitle2).to({ alpha: 1 }, 300)
  createjs.Tween.get(logo).to({ alpha: 1 }, 300)
  createjs.Tween.get(bigPower).to({ alpha: 1 }, 300)
  createjs.Tween.get(concentration).to({ alpha: 1 }, 300)
  createjs.Tween.get(waterDrop).to({ alpha: 1 }, 300)
  createjs.Tween.get(waterDrop, { loop: true }).to({ y: 570 }, 1000, createjs.Ease.getPowInOut(2)).to({ y: 600 }, 1000, createjs.Ease.getPowInOut(2))
  createjs.Tween.get(bottom).to({ alpha: 1 }, 300)
  createjs.Tween.get(light_line_long, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
  createjs.Tween.get(light_line_long2, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
  createjs.Tween.get(light_line_long3, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
}

 

快速入门createjs

createjs简介
createjs中包含以下四个部分:
EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控)
TweenJS:用于做动画效果
SoundJS:音频播放引擎
PreloadJS:网站资源预加载
类似于SoundJS,PreloadJS,如果自己处理起来比较方便的话,也可以自己写,总的来说,它们相当于一个辅助作用,可选可不选。因此,本文章主要讲解EaselJS的使用。
1. EaselJS的大致api
  • 画图片用(Bitmap)
  • 画图形,比如矩形,圆形等用(Shape) 【类似于改变坐标x,y,增加阴影shadow,透明度alpha,缩小放大scaleX/scaleY都可以做到】
  • 画文字,用(Text)
  • 还有容器Container的概念,容器可以包含多个显示对象
2. EaselJS绘图的大致流程
大致流程:创建显示对象→设置一些参数→调用方法绘制→添加到舞台→update(),代码如下:
<script src="easeljs-0.7.1.min.js"></script>  //引入相关的js文件
<canvas id="canvas"></canvas>

var canvas = document.querySelector('#canvas');
//创建舞台
var stage = new createjs.Stage(canvas);
//创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台  
stage.addChild(rect);
//刷新舞台
stage.update();

graphics可以设置一些样式,线条宽度,颜色等等,也可以调用一些方法绘制图形,比如矩形drawRect,圆形drawCircle等等,具体可以自己查看api。

注意:记得一定要把shape对象加到舞台上,否则屏幕上不会显示。
3. Ticker定时器
写createjs肯定会遇到的一个,就是ticker,主要就是定时刷新舞台,理想的帧速率是60FPS
createjs.Ticker.setFPS(60);
4. 控制多个显示对象的层级关系
stage,contain对象有个children属性代表子元素,是一个数组,里面的元素层级像下标一样从0开始,简单来说就是后面的覆盖前面的,addChild方法是添加到显示列表的最后。
我们也可以动态改变children的层叠效果。
stage.setChildIndex(red,1);
5.容器 container
它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素,包含在一个Container中方便统一管理。
比如一个人物,他由手,脚,头,身体组成,你可以将这几个部分放在同一个container中,统一移动。使用方法也比较简单:
var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

蹬蹬蹬~本篇文章的重点,绘制图像并对图像进行处理

6. 绘制图片
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

按照上面的EaselJS的正常的绘制流程来说,上面这段代码应该可以正常显示。但是,只是有些情况下可以正常显示的,这个图像资源需要确定加载成功后才可以new,否则不会有图像在画布上,如果有做资源预加载,可以直接使用上面的代码,如果没有,则需要在image加载完成onload之后才进行绘制

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () {
 var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

仅仅绘制图片是不够的,createjs提供了几种处理图片的方法:

 

6.1  给图片增加遮罩层
使用mask属性,可以只显示图片和shape相交的区域
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
//遮罩图形
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
stage.update();
常用应用场景:用来剪裁图片,比如显示圆形的图片等
1537319803-9332-20170620210438148-1566406616
6.2 给图片增加滤镜效果

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];
我们发现,图片还是没有变模糊,原因是图片添加了filter后stage立即刷新,filter只能保持一帧的效果,第二帧filter则失效了。而使用图片的cache()方法后,可以使得无论舞台怎么刷新,都可以保持住Filter的效果,添加cache还有很多作用,可以提高FPS,缓存等
bg.cache(0,0,bg.image.width,bg.image.height);

 

6.3 使用Rectangle剪裁图片
使用EaselJS内置的Rectangle对象来创建一个选取框,显示图片的某各部分。

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();
适用场景:拼图小游戏,剪裁图片……
1537319804-6147-20170620211138116-572262994
7. createjs事件

easeljs事件默认是不支持touch设备的,需要以下代码才支持:

createjs.Touch.enable(stage);

对于Bitmap,Shape等对象,都可以直接使用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener(‘click’,handle);

 

8. CreateJs的渲染模式
CreateJs提供了两种渲染模式,一种是用setTimeout,一种是用requestAnimationFrame,默认是setTimeout,默认的帧数是20,一般的话还没啥,但是如果动画多的话,设置成requestAnimationFrame模式的话,就会感觉到动画如丝般的流畅。
createjs.Ticker.timingMode = createjs.Ticker.RAF;

 

9.适配
在移动端开发中,不得不面对一个多屏幕,多尺寸的问题,所以适配问题显得特别重要。
先固定canvas的width为750,根据设备的高宽比设置对应750宽的高,然后用css将canvas的缩放或拉伸整个屏幕,这种方法可以保证canvas内部的元素的逻辑尺寸大小不发生变化,也能达到适配
<canvas id="game" width="750" height="700"></canvas>

注意,以上代码的width,height不同于css中的width,height。

比如,你在canvas内部绘制图片,用x,y轴进行定位,这里的x,y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么,就会有以下的效果,canvas会适配屏幕尺寸,里面的图片也会等比例变大变小。

1537319804-4906-20170620212525038-191765525 1537319804-6441-20170620212551195-434025557

SVG 图像入门教程

一、概述

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。

1535077214-8750-ctS55l0tjplHBGG4qmOVTBf19PQw

SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。

 

<!DOCTYPE html>
<html>
<head></head>
<body>

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
    <circle id="mycircle" cx="400" cy="300" r="50"/>
    </svg>

</body>
</html>

上面是 SVG 代码直接插入网页的例子。

SVG 代码也可以写在一个独立文件中,然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

 

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS 也可以使用 SVG 文件。

.logo {

  background: url(icon.svg);

}

SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。

<img src=”data:image/svg+xml;base64,[data]”>

二、语法

2.1<svg>标签

SVG 代码都放在顶层标签<svg>之中。下面是一个例子。

<svg width=“100%” height=“100%”>

  <circle id=“mycircle” cx=“50” cy=“50” r=“50” />

</svg>

<svg>的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。

如果只想展示 SVG 图像的一部分,就要指定viewBox属性。

<svg width=“100” height=“100” viewBox=“50 50 50 50″>

  <circle id=“mycircle” cx=“50” cy=“50” r=“50” />

</svg>

<viewBox>属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中,SVG 图像是100像素宽 x 100像素高,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到的是右下角的四分之一圆。

注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。

如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。

2.2 <circle>标签

<circle>标签代表圆形。

<svg width=“300” height=“180”>

  <circle cx=“30”  cy=“50” r=“25” />

  <circle cx=“90”  cy=“50” r=“25” class=“red” />

  <circle cx=“150” cy=“50” r=“25” class=“fancy” />

</svg>

上面的代码定义了三个圆。<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径,单位为像素。坐标都是相对于<svg>画布的左上角原点。

class属性用来指定对应的 CSS 类。

.red {

  fill: red;

}

 

.fancy {

  fill: none;

  stroke: black;

  stroke-width: 3pt;

}

SVG 的 CSS 属性与网页元素有所不同。

  • fill:填充色
  • stroke:描边色
  • stroke-width:边框宽度

2.3 <line>标签

<line>标签用来绘制直线。

<svg width=“300” height=“180”>

  <line x1=“0” y1=“0” x2=“200” y2=“0” style=“stroke:rgb(0,0,0);stroke-width:5″ />

</svg>

上面代码中,<line>标签的x1属性和y1属性,表示线段起点的横坐标和纵坐标;x2属性和y2属性,表示线段终点的横坐标和纵坐标;style属性表示线段的样式。

2.4 <polyline>标签

<polyline>标签用于绘制一根折线。

<svg width=“300” height=“180”>

  <polyline points=“3,3 30,28 3,53″ fill=“none” stroke=“black” />

</svg>

<polyline>的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

2.5 <rect>标签

<rect>标签用于绘制矩形。

<svg width=“300” height=“180”>

  <rect x=“0” y=“0” height=“100” width=“200” style=“stroke: #70d5dd; fill: #dd524b” />

</svg>

<rect>的x属性和y属性,指定了矩形左上角端点的横坐标和纵坐标;width属性和height属性指定了矩形的宽度和高度(单位像素)。

2.6 <ellipse>标签

<ellipse>标签用于绘制椭圆。

<svg width=“300” height=“180”>

  <ellipse cx=“60” cy=“60” ry=“40” rx=“20” stroke=“black” strokewidth=“5” fill=“silver”/>

</svg>

<ellipse>的cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像素);rx属性和ry属性,指定了椭圆横向轴和纵向轴的半径(单位像素)。

2.7 <polygon>标签

<polygon>标签用于绘制多边形。

<svg width=“300” height=“180”>

  <polygon fill=“green” stroke=“orange” strokewidth=“1” points=“0,0 100,0 100,100 0,100 0,0″/>

</svg>

<polygon>的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

2.8 <path>标签

<path>标签用于制路径。

<svg width=“300” height=“180”>

<path d=

M 18,3

L 46,3

L 46,40

L 61,40

L 32,68

L 3,40

L 18,40

Z

></path>

</svg>

<path>的d属性表示绘制顺序,它的值是一个长字符串,每个字母表示一个绘制动作,后面跟着坐标。

  • M:移动到(moveto)
  • L:画直线到(lineto)
  • Z:闭合路径

2.9 <text>标签

<text>标签用于绘制文本。

<svg width=“300” height=“180”>

  <text x=“50” y=“25”>Hello World</text>

</svg>

<text>的x属性和y属性,表示文本区块基线(baseline)起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

2.10 <use>标签

<use>标签用于复制一个形状。

<svg viewBox=“0 0 30 10″ xmlns=“http://www.w3.org/2000/svg”>

  <circle id=“myCircle” cx=“5” cy=“5” r=“4”/>

 

  <use href=“#myCircle” x=“10” y=“0” fill=“blue” />

  <use href=“#myCircle” x=“20” y=“0” fill=“white” stroke=“blue” />

</svg>

<use>的href属性指定所要复制的节点,x属性和y属性是<use>左上角的坐标。另外,还可以指定width和height坐标。

2.11 <g>标签

<g>标签用于将多个形状组成一个组(group),方便复用。

<svg width=“300” height=“100”>

  <g id=“myCircle”>

    <text x=“25” y=“20”>圆形</text>

    <circle cx=“50” cy=“50” r=“20”/>

  </g>

 

  <use href=“#myCircle” x=“100” y=“0” fill=“blue” />

  <use href=“#myCircle” x=“200” y=“0” fill=“white” stroke=“blue” />

</svg>

2.12 <defs>标签

<defs>标签用于自定义形状,它内部的代码不会显示,仅供引用。

<svg width=“300” height=“100”>

  <defs>

    <g id=“myCircle”>

      <text x=“25” y=“20”>圆形</text>

      <circle cx=“50” cy=“50” r=“20”/>

    </g>

  </defs>

 

  <use href=“#myCircle” x=“0” y=“0” />

  <use href=“#myCircle” x=“100” y=“0” fill=“blue” />

  <use href=“#myCircle” x=“200” y=“0” fill=“white” stroke=“blue” />

</svg>

2.13 <pattern>标签

<pattern>标签用于自定义一个形状,该形状可以被引用来平铺一个区域。

<svg width=“500” height=“500”>

  <defs>

    <pattern id=“dots” x=“0” y=“0” width=“100” height=“100” patternUnits=“userSpaceOnUse”>

      <circle fill=“#bee9e8″ cx=“50” cy=“50” r=“35” />

    </pattern>

  </defs>

  <rect x=“0” y=“0” width=“100%” height=“100%” fill=“url(#dots)” />

</svg>

上面代码中,<pattern>标签将一个圆形定义为dots模式。patternUnits=”userSpaceOnUse”表示<pattern>的宽度和长度是实际的像素值。然后,指定这个模式去填充下面的矩形。

2.14 <image>标签

<image>标签用于插入图片文件。

<svg viewBox=“0 0 100 100″ width=“100” height=“100”>

  <image xlink:href=“path/to/image.jpg”

    width=“50%” height=“50%”/>

</svg>

上面代码中,<image>的xlink:href属性表示图像的来源。

2.15 <animate>标签

<animate>标签用于产生动画效果。

<svg width=“500px” height=“500px”>

  <rect x=“0” y=“0” width=“100” height=“100” fill=“#feac5e”>

    <animate attributeName=“x” from=“0” to=“500” dur=“2s” repeatCount=“indefinite” />

  </rect>

</svg>

上面代码中,矩形会不断移动,产生动画效果。

<animate>的属性含义如下。

  • attributeName:发生动画效果的属性名。
  • from:单次动画的初始值。
  • to:单次动画的结束值。
  • dur:单次动画的持续时间。
  • repeatCount:动画的循环模式。

可以在多个属性上面定义动画。

<animate attributeName=”x” from=”0″ to=”500″ dur=”2s” repeatCount=”indefinite” />

<animate attributeName=”width” to=”500″ dur=”2s” repeatCount=”indefinite” />

2.16 <animateTransform>标签

<animate>标签对 CSS 的transform属性不起作用,如果需要变形,就要使用<animateTransform>标签。

<svg width=“500px” height=“500px”>

  <rect x=“250” y=“250” width=“50” height=“50” fill=“#4bc0c8″>

    <animateTransform attributeName=“transform” type=“rotate” begin=“0s” dur=“10s” from=“0 200 200″ to=“360 400 400″ repeatCount=“indefinite” />

  </rect>

</svg>

上面代码中,<animateTransform>的效果为旋转(rotate),这时from和to属性值有三个数字,第一个数字是角度值,第二个值和第三个值是旋转中心的坐标。from=”0 200 200″表示开始时,角度为0,围绕(200, 200)开始旋转;to=”360 400 400″表示结束时,角度为360,围绕(400, 400)旋转。

三、JavaScript 操作

3.1 DOM 操作

如果 SVG 代码直接写在 HTML 网页之中,它就成为网页 DOM 的一部分,可以直接用 DOM 操作。

<svg

  id=“mysvg”

  xmlns=“http://www.w3.org/2000/svg”

  viewBox=“0 0 800 600″

  preserveAspectRatio=“xMidYMid meet”

>

  <circle id=“mycircle” cx=“400” cy=“300” r=“50” />

<svg>

上面代码插入网页之后,就可以用 CSS 定制样式。

circle {

  stroke-width: 5;

  stroke: #f00;

  fill: #ff0;

}

 

circle:hover {

  stroke: #090;

  fill: #fff;

}

然后,可以用 JavaScript 代码操作 SVG。

var mycircle = document.getElementById(‘mycircle’);

 

mycircle.addEventListener(‘click’, function(e) {

  console.log(‘circle clicked – enlarging’);

  mycircle.setAttribute(‘r’, 60);

}, false);

上面代码指定,如果点击图形,就改写circle元素的r属性。

3.2 获取 SVG DOM

使用<object>、<iframe>、<embed>标签插入 SVG 文件,可以获取 SVG DOM。

var svgObject = document.getElementById(‘object’).contentDocument;

var svgIframe = document.getElementById(‘iframe’).contentDocument;

var svgEmbed = document.getElementById(’embed’).getSVGDocument();

注意,如果使用<img>标签插入 SVG 文件,就无法获取 SVG DOM。

3.3 读取 SVG 源码

由于 SVG 文件就是一段 XML 文本,因此可以通过读取 XML 代码的方式,读取 SVG 源码。

<div id=“svg-container”>

  <svg

    xmlns=“http://www.w3.org/2000/svg”

    xmlns:xlink=“http://www.w3.org/1999/xlink”

    xml:space=“preserve” width=“500” height=“440”

>

    <!– svg code –>

  </svg>

</div>

使用XMLSerializer实例的serializeToString()方法,获取 SVG 元素的代码。

var svgString = new XMLSerializer()

.serializeToString(document.querySelector(‘svg’));

3.4 SVG 图像转为 Canvas 图像

首先,需要新建一个Image对象,将 SVG 图像指定到该Image对象的src属性。

var img = new Image();

var svg = new Blob([svgString], {type: “image/svg+xml;charset=utf-8″});

 

var DOMURL = self.URL || self.webkitURL || self;

var url = DOMURL.createObjectURL(svg);

 

img.src = url;

然后,当图像加载完成后,再将它绘制到<canvas>元素。

img.onload = function () {

  var canvas = document.getElementById(‘canvas’);

  var ctx = canvas.getContext(‘2d’);

  ctx.drawImage(img, 0, 0);

};

四、实例:折线图

下面将一张数据表格画成折线图。

Date |Amount

—–|——

20140101 | $10

20140201 | $20

20140301 | $40

20140401 | $80

上面的图形,可以画成一个坐标系,Date作为横轴,Amount作为纵轴,四行数据画成一个数据点。

<svg width=“350” height=“160”>

  <g class=“layer” transform=“translate(60,10)”>

    <circle r=“5” cx=“0”   cy=“105” />

    <circle r=“5” cx=“90”  cy=“90”  />

    <circle r=“5” cx=“180” cy=“60”  />

    <circle r=“5” cx=“270” cy=“0”   />

 

    <g class=“y axis”>

      <line x1=“0” y1=“0” x2=“0” y2=“120” />

      <text x=“-40″ y=“105” dy=“5”>$10</text>

      <text x=“-40″ y=“0”   dy=“5”>$80</text>

    </g>

    <g class=“x axis” transform=“translate(0, 120)”>

      <line x1=“0” y1=“0” x2=“270” y2=“0” />

      <text x=“-30″   y=“20”>January 2014</text>

      <text x=“240” y=“20”>April</text>

    </g>

  </g>

</svg>

五、参考链接

  • Jon McPartland, An introduction to SVG animation
  • Alexander Goedde, SVG – Super Vector Graphics
  • Joseph Wegner, Learning SVG
  • biovisualize, Direct svg to canvas to png conversion
  • Tyler Sticka, Cropping Image Thumbnails with SVG
  • Adi Purdila, How to Create a Loader Icon With SVG Animations
1238