四、 Canvas 开发库封装
4.1 封装常用的绘制函数
4.1.1 封装一个矩形
//思考：我们用到的矩形需要哪些绘制的东西呢？
- 矩形的 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托管源码
* 性能也不错- 其他的还有很多，希望以后能用到你们的库。
五、Konva 的使用快速上手
5.1 Konva 的整体理念
- 舞台的概念的引入。整个视图看做是一个舞台 stage
- 舞台中可以绘制很多个层 layer
- layer 下面可以有很多的 group
- group 下面可以有 矩形、图片、其他形状等
- 参看：快速上手文档---查看翻译文档
Stage
|
------ ------
| |
Layer Layer
| |
----- ----- Shape
| |
Group Group
| |
--- ---
| | |
Shape Group Shape
|
|
Shape5.2 Konva 矩形案例
5.2.1 创建一个矩形： Konva.Rect(option);
代码语言：javascript复制//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 的控制方法
- tween.play(), //播放动画
- tween.pause(), //暂停动画
- tween.reverse(), //动画逆播放
- tween.reset(), //重置动画
- tween.finish(), //立即结束动画
- seek：英文：寻找 英 [siːk] 美 [sik]
- tween 的缓动控制选项
- 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 动画缓动效果案例.html
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 循环播放动画的实现
代码语言：javascript复制//总体思路，使用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: '微软雅黑',
fontFill: "purple",
fontX: -30 ,
fontY: -7,
x: (Math.cos(-115 * Math.PI / 180) * L3_Radius),
y: (Math.sin(-115 * Math.PI / 180) * L3_Radius),
innerFill: "yellow",
outerFill: "#ddd",
opacity: .7
},{
text: "HTML5",
innerRadius: 40,
outerRadius: 50,
fontSize: 16 ,
fontFamily: '微软雅黑',
fontFill: "purple",
fontX: -30 ,
fontY: -7,
x: (Math.cos(-45 * Math.PI / 180) * L3_Radius),
y: (Math.sin(-45 * Math.PI / 180) * L3_Radius),
innerFill: "green",
outerFill: "#ddd",
opacity: .7
}];
for( var i = 0; i < L3CircleData.length; i ) {
var tempCircleText = new CircleText(L3CircleData[i]);
var circleTextGroup = tempCircleText.createCircleText();
group.add(circleTextGroup);
}
layer.add(group);
//绘制第二层动画层
var groupL2 = new Konva.Group({
x: groupX,
y: groupY,
rotation: 0
});
// 绘制第二层的一个圆形
var zeptoJSCircleText = new CircleText({
text: "zeptoJS",
innerRadius: 30,
outerRadius: 40,
fontSize: 14 ,
fontFamily: '微软雅黑',
fontFill: "blue",
fontX: -26 ,
fontY: -7,
x: (Math.cos(-75 * Math.PI / 180) * L2_Radius),
y: (Math.sin(-75 * Math.PI / 180) * L2_Radius),
innerFill: "orange",
outerFill: "#ddd",
opacity: .7
});
var groupZepto = zeptoJSCircleText.createCircleText();
groupL2.add(groupZepto);
var CSS3CircleText = new CircleText({
text: "CSS3",
innerRadius: 30,
outerRadius: 40,
fontSize: 14 ,
fontFamily: '微软雅黑',
fontFill: "blue",
fontX: -20 ,
fontY: -7,
x: (Math.cos(105 * Math.PI / 180) * L2_Radius),
y: (Math.sin(105 * Math.PI / 180) * L2_Radius),
innerFill: "pink",
outerFill: "#ddd",
opacity: .7
});
var groupC3 = CSS3CircleText.createCircleText();
groupL2.add(groupC3);
layer.add(groupL2);
layer.batchDraw();
//动画处理层
var angularSpeed = 60;//每秒旋转的角度
var anim = new Konva.Animation(function(frame) {
console.log(frame.timeDiff);
//计算每一帧旋转的角度
var angleDiff = frame.timeDiff * angularSpeed / 1000;
//三环进行旋转
group.rotate(angleDiff);
//
group.getChildren().each(function(value, index){
value.rotate(-angleDiff)
});
//2环 旋转
groupL2.rotate(-angleDiff);
//2环内的 组合进行反向旋转
groupL2.getChildren().each(function(value, index){
value.rotate(angleDiff)
});
}, layer);
anim.start();
// 动画事件处理
group.on('mouseover touchstart',function(e){
angularSpeed = 10;
});
group.on('mouseleave touchend',function(e){
angularSpeed = 60;
});
})();
//旋转图像的组合对象
function CircleText(option) {
// 文字内容
// 圆的半径
// 默认坐标位置
// 颜色圆
// 颜色光环
// 透明度
option = option || {};
option.text = option.text || "canvas";
option.innerRadius = option.innerRadius || 40;
option.outerRadius = option.outerRadius || 60;
option.fontSize = option.fontSize || 14;
option.fontWeight = option.fontWeight || "bold";
option.fontFamily = option.fontFamily || '微软雅黑';
option.fontFill = option.fontFill || "#FFF";
option.fontX = option.fontX ||-20;
option.fontY = option.fontY ||-7;
option.x = option.x === 0 ? 0 : option.x || 217;
option.y = option.y === 0 ? 0 : option.y || 217;
option.innerFill = option.innerFill || "teal";
option.outerFill = option.outerFill || "#ddd";
option.opacity = option.opacity || .5;
//创建旋转组合对象的 组
this.createCircleText = function() {
var group = new Konva.Group({
x: option.x,
y: option.y,
rotation: 0
});
//内圆
var innerCircle = new Konva.Circle({
x: 0,
y: 0,
radius: option.innerRadius,
fill: option.innerFill,
opacity: option.opacity,
perfectDrawEnabled : false
});
group.add(innerCircle);
//环形
var outerRing = new Konva.Ring({
x: 0,
y: 0,
innerRadius: option.innerRadius,
outerRadius: option.outerRadius,
fill: option.outerFill,
opacity: option.opacity,
perfectDrawEnabled: false
});
group.add(outerRing);
//文字
var text = new Konva.Text({
text: option.text,
fontSize: option.fontSize,
fontFamily: option.fontFamily,
fontStyle: 'bold',
fill: option.fontFill,
x: option.fontX,
y: option.fontY,
align: 'left'
});
group.add(text);
return group;
}
}
</script>
</body>
</html>代码语言：javascript复制group 的灵活运用 * konva 的 group 很灵活，每个 group 都有自己的坐标系 * group 可以包含其他的 group，可以对 group 做整个组的动画 * group 可以通过 getChidren();//可以拿到直接子级元素。
var group = new Konva.Group({
x: 0,
y: 0
});
group.add(rect);5.4 Konva 的事件（重要）
代码语言：javascript复制var rect = new Konva.Rect({
x: 100,
y: 100,
fill: 'red',
width: 200,
height: 200
});
//绑定事件 Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend
rect.on('click', function() {
//jQuery一模一样！！
console.log('^_^ ^_^');
});
//绑定多个事件
rect.on('click mousemove', function(e) {});
//解除绑定事件
rect.off('click'); //这不是jQuery吗？
//触发事件
rect.fire('click');
//取消事件冒泡
rect.on('click', function(evt) {
alert('You clicked the circle!');
evt.cancelBubble = true; //取消事件冒泡
});5.5 Konva 的选择器
- 选择方法。
- ID 选择法：stage.find('#id'); //此方法返回的是一个数组
- name 选择法：group.findOne('.name');//返回一个 Konva 对象
- type 选择法： group.find('Circle');//查找所有的圆形 Konva 对象
//组中查找圆形的Konva对象
groupCircle.find('Circle').each(function(circle, index) {
circle.setZIndex(3 - index);
});5.6 饼状图案例
- wedge: 楔形
//创建舞台
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,//全屏
height: window.innerHeight
});
//中心点坐标
var cenX = stage.width() / 2;
var cenY = stage.height() / 2;
//创建层
var layer = new Konva.Layer();
stage.add(layer);
//饼状图数据
var data = [{
name: "前端",
value: .25,
color: '#e0e'
},{
name: "php",
value: .2,
color: 'orange'
},{
name: "UI",
value: .3,
color: 'blue'
},{
name: "C ",
value: .05,
color: 'green'
},{
name: "游戏",
value: .1,
color: 'purple'
},{
name: "Java",
value: .1,
color: 'red'
}];
//创建饼状图
var pieChart = new PieChart({
data: data,//扇形区域的数据
animateDuration: 2,//扇形动画的时间
easing: Konva.Easings.EaseIn,//扇形动画的速度规格
x: cenX,
y: cenY,
radius: .14 * stage.width(),//半径
txtAwayFromWedge: .2 * .14 * stage.width()//扇形上的文字的距离圆形的距离
});
pieChart.addToLayer(layer);
pieChart.playAnimate();
layer.draw();
layer.on('click tap', function(){
pieChart.playAnimate();
});
//饼状图
function PieChart(option) {
var _this = this;
if( !option ) {
throw new Error('请初始化饼状图的参数');
}
this.animageIndex = 0;
this.init = function(otpion) {
//饼状图数据：[{name:'',value:.2,color:'red'},...]
option.data = option.data || [];
//动画执行的时间
option.animateDuration = option.animateDuration || .8;
//动画执行的效果
option.easing = option.easing || Konva.Easings.Linear;
//x,y坐标
option.x = option.x || 0;
option.y = option.y || 0;
//饼状图半径
option.radius = option.radius === 0 ? 0 : option.radius || 100;
option.txtAwayFromWedge = option.txtAwayFromWedge || 20;
//扇区的组
this.group = new Konva.Group({
x: option.x,
y: option.y
});
//文字的组
this.TxtGroup = new Konva.Group({
x: option.x,
y: option.y
});
//默认的旋转角度
var tempAngel = -90;
//遍历生成所有扇形的对象
for(var i = 0; i < option.data.length; i ) {
var wedgeAngel = option.data[i].value * 360;
var wedge = new Konva.Wedge({
x: 0,
y: 0,
radius: option.radius,
fill: option.data[i].color,
angle: 0,//后面有计算出角度放到数组中
opacity: .8,
id: option.data[i].name,
name: wedgeAngel '',
rotation: tempAngel,
visible: true
});
this.group.add(wedge);
//当前 扇形的对象 和扇形的需要旋转的角度
// arr.push({value: wedge, angle: option.data[i].value * 360});
//绘制 文字
//扇形区域的中间
var totalAngle = tempAngel 1/2 * wedgeAngel;
//设置文字的x坐标
var txtX = Math.cos( totalAngle * Math.PI / 180) * (option.radius option.txtAwayFromWedge);
// 设置文字的y坐标
var txtY = Math.sin( totalAngle * Math.PI / 180) * (option.radius option.txtAwayFromWedge);
var txtTitle = option.data[i].name ' ' option.data[i].value * 100 '%';
var txt = new Konva.Text({
x: txtX,
y: txtY,
fill: option.data[i].color,
fontSize: '14px',
fontFamily: '微软雅黑',
fontStyle: 'bold',
align: 'left',
id: 'txt_' option.data[i].name,
text: txtTitle,
visible: false //默认隐藏
});
this.TxtGroup.add(txt);
console.log(txt.x() " " txt.y());
//设置下一个元素旋转到具体的位置
tempAngel = option.data[i].value * 360;
}
};
this.init(option);//初始化
//把当前 饼状图添加到 层
this.addToLayer = function(layer) {
layer.add(this.group);
layer.add(this.TxtGroup);
layer.draw();
};
//展示动画
this.playAnimate = function() {
_this = this;
if(this.animageIndex >= data.length) {
_this.animageIndex = 0;
return;
}
if(this.animageIndex == 0) {
_this.group.getChildren().each(function(value, index){
value.angle(0);
});
_this.TxtGroup.getChildren().each(function(value,index){
value.hide();
});
}
this.calleeFn = arguments.callee;//当前函数
//绘制一个 扇区的动画
var wedge = this.group.getChildren()[this.animageIndex];
var angel = Number(wedge.name());//扇区的度数
wedge.to({
angle: angel,
duration: angel * option.animateDuration / 360,
onFinish: function() {
_this.TxtGroup.getChildren()[_this.animageIndex].show();
_this.TxtGroup.getParent().draw();
_this.animageIndex ;
_this.calleeFn();//调用当前函数自身，形成动画队列。
}
});
};
}5.7 柱状图案例
- histogram n. [统计] 直方图；柱状图 英 ['hɪstəgræm] 美 ['hɪstəɡræm]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>36柱状图案例</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
</style>
<script src="bower_components/konva/konva.min.js"></script>
<script src="js/KonvaExtend.js" charset="utf-8"></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 cenX = stage.width() / 2;
var cenY = stage.height() / 2;
var data = [
{ name: '百度', value: .2, color: 'blue' },
{ name: '阿里', value: .4, color: 'red' },
{ name: '新浪', value: .1, color: 'purple' },
{ name: '搜狐', value: .1, color: 'navy' },
{ name: '360', value: .2, color: 'orange' }
];
var his = new Histogram({
data: data,
x: 1/8 * stage.width(),
y: 3/4 * stage.height(),
blWidth: 2,
blColor: 'lightblue',
width: 3/4 * stage.width(),
height: 1/3 * stage.height(),
fontSize: 14
});
his.addToGroupOrLayer(layer);
layer.draw();
his.playAnimate();
layer.on('click',function(){
his.playAnimate();
});
</script>
</body>
</html>六、Canvas 项目实战
七、Canvas 优化
代码语言：javascript复制 <!-- requestAnim shim layer by Paul Irish -->
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;
init();
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
}
function animate() {
requestAnimFrame( animate );
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 192 256;
var y = Math.cos( time * 0.9 ) * 192 256;
toggle = !toggle;
context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}视频
配套视频请戳：https://www.bilibili.com/video/av26151775/
