angularJS结合canvas画图例子
这里给大家分享一个angularJS结合canvas画图例子,效果非常不错，赞一个先。
<!DOCTYPEhtml>
<htmlng-app="APP">
<head>
<metacharset="UTF-8">
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head>
<bodyng-controller="MainCtrl">
<!--
界面的这个元素会被替换成canvas元素;
-->
<divang:round:progressdata-round-progress-model="roundProgressData"></div>
<br>
<inputtype="number"ng-model="roundProgressData.label"/>
<script>
//引用angular.directives-round-progress这个模块;
varAPP=angular.module('APP',['angular.directives-round-progress']).
controller('MainCtrl',function($scope){
$scope.roundProgressData={
//这个是初始化的数据;
label:11,
percentage:0.11
}
//通过监听scope下的这个roundProgressData属性,对界面的canvas进行重绘;
$scope.$watch('roundProgressData',function(newValue){
newValue.percentage=newValue.label/100;
},true);
});
</script>
<script>
/*!
*AngularJSRoundProgressDirective
*
*Copyright2013StephaneBegaudeau
*ReleasedundertheMITlicense
*/
angular.module('angular.directives-round-progress',[]).directive('angRoundProgress',[function(){
varcompilationFunction=function(templateElement,templateAttributes,transclude){
if(templateElement.length===1){
//初始化DOM模型,包括初始化canvas等;
varnode=templateElement[0];
varwidth=node.getAttribute('data-round-progress-width')||'400';
varheight=node.getAttribute('data-round-progress-height')||'400';
varcanvas=document.createElement('canvas');
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
canvas.setAttribute('data-round-progress-model',node.getAttribute('data-round-progress-model'));
//相当于demo,替换原来的元素;
node.parentNode.replaceChild(canvas,node);
//各种配置;
varouterCircleWidth=node.getAttribute('data-round-progress-outer-circle-width')||'20';
varinnerCircleWidth=node.getAttribute('data-round-progress-inner-circle-width')||'5';
varouterCircleBackgroundColor=node.getAttribute('data-round-progress-outer-circle-background-color')||'#505769';
varouterCircleForegroundColor=node.getAttribute('data-round-progress-outer-circle-foreground-color')||'#12eeb9';
varinnerCircleColor=node.getAttribute('data-round-progress-inner-circle-color')||'#505769';
varlabelColor=node.getAttribute('data-round-progress-label-color')||'#12eeb9';
varouterCircleRadius=node.getAttribute('data-round-progress-outer-circle-radius')||'100';
varinnerCircleRadius=node.getAttribute('data-round-progress-inner-circle-radius')||'70';
varlabelFont=node.getAttribute('data-round-progress-label-font')||'50ptCalibri';
return{
pre:functionpreLink(scope,instanceElement,instanceAttributes,controller){
varexpression=canvas.getAttribute('data-round-progress-model');
//监听模型,O了
//就监听一个属性;
scope.$watch(expression,function(newValue,oldValue){
//Createthecontentofthecanvas
//包括新建和重绘;
varctx=canvas.getContext('2d');
ctx.clearRect(0,0,width,height);
//The"background"circle
varx=width/2;
vary=height/2;
ctx.beginPath();
ctx.arc(x,y,parseInt(outerCircleRadius),0,Math.PI*2,false);
ctx.lineWidth=parseInt(outerCircleWidth);
ctx.strokeStyle=outerCircleBackgroundColor;
ctx.stroke();
//Theinnercircle
ctx.beginPath();
ctx.arc(x,y,parseInt(innerCircleRadius),0,Math.PI*2,false);
ctx.lineWidth=parseInt(innerCircleWidth);
ctx.strokeStyle=innerCircleColor;
ctx.stroke();
//Theinnernumber
ctx.font=labelFont;
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillStyle=labelColor;
ctx.fillText(newValue.label,x,y);
//The"foreground"circle
varstartAngle=-(Math.PI/2);
varendAngle=((Math.PI*2)*newValue.percentage)-(Math.PI/2);
varanticlockwise=false;
ctx.beginPath();
ctx.arc(x,y,parseInt(outerCircleRadius),startAngle,endAngle,anticlockwise);
ctx.lineWidth=parseInt(outerCircleWidth);
ctx.strokeStyle=outerCircleForegroundColor;
ctx.stroke();
},true);
},
post:functionpostLink(scope,instanceElement,instanceAttributes,controller){}
};
}
};
varroundProgress={
//compile里面先对dom进行操作,再对$socpe进行监听;
compile:compilationFunction,
replace:true
};
returnroundProgress;
}]);
</script>
</body>
</html>
以上就是angularJS结合canvas画图例子的全部代码了，希望大家能够喜欢。