Canvas入門到高級詳解(下)
4、 Canvas 開發庫封裝
4.1 封裝經常使用的繪製函數
4.1.1 封裝一個矩形
//思考：咱們用到的矩形須要哪些繪製的東西呢？javascript
- 矩形的 x、y座標
- 矩形的寬高
- 矩形的邊框的線條樣式、線條寬度
- 矩形填充的樣式
- 矩形的旋轉角度
- 矩形的縮小放大
//下面是把上面全部的功能進行封裝的代碼： function ItcastRect( option ) {//矩形構造函數 this._init(option); } ItcastRect.prototype = { //矩形的原型對象 _init: function( option ) { //初始化方法 option = option || {}; this.x = option.x === 0 ? 0 : option.x || 100; this.y = option.y === 0 ? 0 : option.y || 100; this.w = option.w || 100; this.h = option.h || 100; this.angle = option.angle === 0 ? 0 : option.angle || 0; this.fillStyle = option.fillStyle || 'silver'; this.strokeStyle = option.strokeStyle || 'red'; this.strokeWidth = option.strokeWidth || 4; this.scaleX = option.scaleX || 1; this.scaleY = option.Y || 1; }, render: function( ctx ) {//把矩形渲染到canvas中 ctx.save(); ctx.translate( this.x, this.y );//位移畫布 ctx.rotate( this.angle * Math.PI / 180 );//旋轉角度 ctx.scale( this.scaleX, this.scaleY );//縮放 ctx.fillStyle = this.fillStyle; ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形 ctx.lineWidth = this.strokeWidth; //線寬 ctx.strokeStyle = this.strokeStyle; //填充樣式 ctx.strokeRect( 0,0,this.w,this.h ); //描邊樣式 ctx.restore(); }, constructor: ItcastRect };
- 4.1.2 做業：嘗試着封裝一個圓形？
//封裝圓形的代碼的答案：不要偷看 function ItcastCircle(option) { this._init(option); } ItcastCircle.prototype = { _init: function(option) { option = option || {}; this.x = option.x === 0 ? 0 : option.x || 100; this.y = option.y === 0 ? 0 : option.y || 100; this.w = option.w || 100; this.h = option.h || 100; this.angle = option.angle === 0 ? 0 : option.angle || 0; this.fillStyle = option.fillStyle || 'silver'; this.strokeStyle = option.strokeStyle || 'red'; this.strokeWidth = option.strokeWidth || 4; this.scaleX = option.scaleX || 1; this.scaleY = option.Y || 1; this.opactity = option.opactity || 1; this.counterclockwise = option.counterclockwise === true ? true : option.counterclockwise || false; this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0; this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0; this.startAngle = (this.startAngle * Math.PI) / 180; this.endAngle = (this.endAngle * Math.PI) / 180; this.r = option.r || 100; }, render: function(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.scale(this.scaleX, this.scaleY); ctx.rotate((this.agnle * Math.PI) / 180); ctx.globalAlpha = this.opacity; ctx.fillStyle = this.fillStyle; ctx.strokeStyle = this.strokeStyle; ctx.moveTo(0, 0); ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise ); ctx.fill(); ctx.stroke(); ctx.restore(); }, constructor: ItcastCircle };
4.2 第三方庫使用
- Rgraph vs 百度的 echart
https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/
- 國產的 egret 引擎
http://www.egret-labs.org/
- 比較火的 3d 引擎：treejs
http://threejs.org/
- Konva
官網：http://konvajs.github.io/ 特色： * 小巧、使用方便、適合移動端和pc端 * 支持豐富的事件處理操做 * 支持相似JQuery的操做方式（順帶能複習jQueyr） * 開源，能夠隨意更改 * 社區更新比較活躍，github託管源碼 * 性能也不錯
- 其餘的還有不少，但願之後能用到大家的庫。
5、Konva 的使用快速上手
5.1 Konva 的總體理念
- 舞臺的概念的引入。整個視圖看作是一個舞臺 stage
- 舞臺中能夠繪製不少個層 layer
- layer 下面能夠有不少的 group
- group 下面能夠有 矩形、圖片、其餘形狀等
- 參看：快速上手文檔---查看翻譯文檔
Stage
| +------+------+ | | Layer Layer | | +-----+-----+ Shape | | Group Group | | + +---+---+ | | | Shape Group Shape | + | Shape
5.2 Konva 矩形案例
5.2.1 建立一個矩形： Konva.Rect(option);
//Konva使用的基本案例 //第一步：建立舞臺 var stage = new Konva.Stage({ container: 'container', //須要存放舞臺的Dom容器 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', //矩形描邊的顏色 strokeWidth: 4, //填充寬度 opactity: .2, //矩形的透明度 scale: 1.2, //矩形的縮放 1：原來大小 rotation: 30, //旋轉的角度，是deg不是弧度。 cornerRadius: 10, //圓角的大小（像素） id: 'rect1', //id屬性，相似dom的id屬性 name: 'rect', draggable: true //是否能夠進行拖拽 }); //建立一個組 var group = new Konva.Group({ x: 40, y: 40, }); group.add( rect ); //把矩形添加到組中 //第四步： 把形狀放到層中 layer.add( group ); //把組添加到層中 layer.draw(); //繪製層到舞臺上
5.3 Konva 的動畫系統
5.3.1 tween 對象(重點)
- tween，英文意思：二者之間， 英 [twiːn] 美 [twin]
- tween 是控制 Konva 對象進行動畫的核心對象。
- tween 能夠控制全部數字類型的屬性進行動畫處理，好比：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等
//案例： var tween = new Konva.Tween({ node: rect, //要進行動畫的Konva對象 x: 300, //要進行動畫的屬性 opacity: .8, duration: 1, //持續時間 easing: Konva.Easings.EaseIn, //動畫的動畫效果 yoyo: true, //是否進行循環播放的設置 onFinish: function() { //動畫執行結束後，執行此方法 } }); tween.play(); //啓動動畫
-
tween 的控制方法php
- tween.play(), //播放動畫
- tween.pause(), //暫停動畫
- tween.reverse(), //動畫逆播放
- tween.reset(), //重置動畫
- tween.finish(), //當即結束動畫
- seek：英文：尋找 英 [siːk] 美 [sik]
-
tween 的緩動控制選項css
- Konva.Easings.Linear //線性
- Konva.Easings.EaseIn //緩動，先慢後快
- Konva.Easings.EaseOut //先快後慢
- Konva.Easings.EaseInOut //兩頭慢，中間快
- Konva.Easings.BackEaseIn //往回來一點，而後往前衝，汽車啓動相似...
- Konva.Easings.BackEaseOut
- Konva.Easings.BackEaseInOut
- Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
- Konva.Easings.ElasticEaseOut
- Konva.Easings.ElasticEaseInOut
- Konva.Easings.BounceEaseIn //彈跳；彈起，反跳；彈回 英 [baʊns] 美 [baʊns]
- Konva.Easings.BounceEaseOut
- Konva.Easings.BounceEaseInOut
- Konva.Easings.StrongEaseIn //強力
- Konva.Easings.StrongEaseOut
- Konva.Easings.StrongEaseInOut
-
動畫效果參考： 29Konva 動畫緩動效果案例.htmlhtml
5.3.2 動畫 to 的使用
- to 就是對 tween 的封裝，比較簡單好用。
//案例： var rect = new Konva.Rect({ x: 10, y: 10, width: 100, height: 100, fill: 'red' }); layer.add(rect); layer.draw(); //動畫系統 rect.to({ x: 100, y: 100, opactity: .1, duration: 3, onFinish: function() { } }); //to: 就是對tween的簡單應用。
5.3.3 Animate 的應用
- Animation 動畫，實際上就是瀏覽器通知開發者進行繪製，並提供當前的時間
var anim = new Konva.Animation(function(frame) { //動畫系統提供的frame有三個屬性可使用： var time = frame.time, // 動畫執行的總時間 timeDiff = frame.timeDiff, // 距離上一幀的時間 frameRate = frame.frameRate; // 幀率（既1000/間隔時間） //動畫的動做 }, layer); anim.start();//啓動動畫 //anim.stop();//結束動畫
5.3.4 循環播放動畫的實現
//整體思路，使用tween 配合onFinish事件中從新播放動畫，達到循環播放的效果 var loopTween = new Konva.Tween({ node: star, //設置要表現動畫的 Konva對象 rotation: 360, //旋轉360度 duration: 2, //動畫持續時間 easing: Konva.Easings.Linear, onFinish: function() { // this === loopTween //true this.reset(); //重置動畫 this.play(); //從新播放動畫 } }); loopTween.play();
5.3.5 回放且循環播放動畫
- yoyo 屬性能夠進行對動畫進行播放完後，回放當前動畫，並持續循環來回切換播放。
rect.to({ duration: 2, scale: 1.5, yoyo: true // 此設置也能夠用於 tween });
5.3.6 進度條案例
5.3.7 （謙太祥和）官網案例
- 三角函數的補充
- Math.sin(弧度); //夾角對面的邊 和 斜邊的比值
- Math.cos(弧度); //夾角側邊 與斜邊的比值
- 圓形上面的點的座標的計算公式
x =x0 + Math.cos(rad) * R;//x0 和 y0 是圓心點座標 _y =y0 + Math.sin(rad) * R;//注意都是弧度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>33Canvas案例-canvas案例</title> <style type="text/css" media="screen"> body { padding: 0; margin: 0; background-color: #f0f0f0; overflow: hidden; } </style> <script src="bower_components/konva/konva.min.js"></script> </head> <body> <div id="container"> </div> <script> (function(){ //建立舞臺 var stage = new Konva.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight }); //舞臺中心，也是旋轉的中心 var groupX = stage.width() / 2, groupY = stage.height() / 2, L3_Radius = 217, L2_Radius = 125, L1_Radius = 90, L0_Radius = 66; //背景層 var bgLayer = new Konva.Layer({ hitGraphEnabled : false//don’t need event on layer set }); //繪製背景圓形 3環 var circle_L3 = new Konva.Circle({ x: groupX, y: groupY, radius: L3_Radius, stroke: '#a0a0a0', stokeWidth: 2, opacity: .3, dash: [10,4] }); bgLayer.add(circle_L3); //繪製背景圓形 2環 var circle_L2 = new Konva.Circle({ x: groupX, y: groupY, radius: L2_Radius, stroke: '#2A3466', stokeWidth: 2, opacity: .3, dash: [10,4] }); bgLayer.add(circle_L2); //繪製背景中心區域 var cneterCircleText = new CircleText({ text: "WEB全棧", innerRadius: L0_Radius, outerRadius: L1_Radius, fontSize: 17, fontFamily: '微軟雅黑', fontFill: "#fff", fontX: -41, fontY: -8, x: groupX, y: groupY, innerFill: "#2A3466", outerFill: "#ddd", opacity: .8 }); var centerGroup = cneterCircleText.createCircleText(); bgLayer.add(centerGroup); stage.add(bgLayer); //動畫層 var layer = new Konva.Layer({ // hitGraphEnabled : false }); stage.add(layer); //建立總體的動畫組 var group = new Konva.Group({ x: groupX, y: groupY, rotation: 0 }); //要建立的5個3環的對象數據設置 var L3CircleData = [{ text: "WebApp",//建立webapp的圓心組合 1 innerRadius: 40, outerRadius: 50, fontSize: 14, fontFamily: '微軟雅黑', fontFill: "#fff", fontX: -30, fontY: -7, x: L3_Radius, y: 0, x: (Math.cos(20 * Math.PI / 180) * L3_Radius), y: (Math.sin(20 * Math.PI / 180) * L3_Radius), innerFill: "#CF2782", outerFill: "#ddd", opacity: .7 },{ text: "canvas",//動態建立第2個group innerRadius: 40, outerRadius: 50, fontSize: 16 , fontFamily: '微軟雅黑', fontFill: "purple", fontX: -28, fontY: -7, x: 0, y: L3_Radius, innerFill: "#7CB9CE", outerFill: "#ddd", opacity: .7 },{ text: "ReactJS", innerRadius: 40, outerRadius: 50, fontSize: 16 , fontFamily: '微軟雅黑', fontFill: "purple", fontX: -30 , fontY: -7, x: -L3_Radius, y: 0, innerFill: "#68AAFC", outerFill: "#ddd", opacity: .7 },{ text: "NodeJS", innerRadius: 40, outerRadius: 50, fontSize: 16 , fontFamily: '微軟雅黑',