angularJS结合canvas画图例子
程序员文章站
2022-07-08 19:31:18
这里给大家分享一个angularjs结合canvas画图例子,效果非常不错，赞一个先。
复制代码 代码如下:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head>
<body ng-controller="mainctrl">
<!--
界面的这个元素会被替换成canvas元素;
-->
<div ang:round:progress data-round-progress-model="roundprogressdata"></div>
<br>
<input type="number" ng-model="roundprogressdata.label"/>
<script>
//引用angular.directives-round-progress这个模块;
var app = 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>
/*!
* angularjs round progress directive
*
* copyright 2013 stephane begaudeau
* released under the mit license
*/
angular.module('angular.directives-round-progress', []).directive('angroundprogress', [function () {
var compilationfunction = function (templateelement, templateattributes, transclude) {
if (templateelement.length === 1) {
//初始化dom模型, 包括初始化canvas等;
var node = templateelement[0];
var width = node.getattribute('data-round-progress-width') || '400';
var height = node.getattribute('data-round-progress-height') || '400';
var canvas = 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);
//各种配置;
var outercirclewidth = node.getattribute('data-round-progress-outer-circle-width') || '20';
var innercirclewidth = node.getattribute('data-round-progress-inner-circle-width') || '5';
var outercirclebackgroundcolor = node.getattribute('data-round-progress-outer-circle-background-color') || '#505769';
var outercircleforegroundcolor = node.getattribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';
var innercirclecolor = node.getattribute('data-round-progress-inner-circle-color') || '#505769';
var labelcolor = node.getattribute('data-round-progress-label-color') || '#12eeb9';
var outercircleradius = node.getattribute('data-round-progress-outer-circle-radius') || '100';
var innercircleradius = node.getattribute('data-round-progress-inner-circle-radius') || '70';
var labelfont = node.getattribute('data-round-progress-label-font') || '50pt calibri';
return {
pre: function prelink(scope, instanceelement, instanceattributes, controller) {
var expression = canvas.getattribute('data-round-progress-model');
//监听模型, o了
//就监听一个属性;
scope.$watch(expression, function (newvalue, oldvalue) {
// create the content of the canvas
//包括新建和重绘;
var ctx = canvas.getcontext('2d');
ctx.clearrect(0, 0, width, height);
// the "background" circle
var x = width / 2;
var y = height / 2;
ctx.beginpath();
ctx.arc(x, y, parseint(outercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint(outercirclewidth);
ctx.strokestyle = outercirclebackgroundcolor;
ctx.stroke();
// the inner circle
ctx.beginpath();
ctx.arc(x, y, parseint(innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint(innercirclewidth);
ctx.strokestyle = innercirclecolor;
ctx.stroke();
// the inner number
ctx.font = labelfont;
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.fillstyle = labelcolor;
ctx.filltext(newvalue.label, x, y);
// the "foreground" circle
var startangle = - (math.pi / 2);
var endangle = ((math.pi * 2 ) * newvalue.percentage) - (math.pi / 2);
var anticlockwise = false;
ctx.beginpath();
ctx.arc(x, y, parseint(outercircleradius), startangle, endangle, anticlockwise);
ctx.linewidth = parseint(outercirclewidth);
ctx.strokestyle = outercircleforegroundcolor;
ctx.stroke();
}, true);
},
post: function postlink(scope, instanceelement, instanceattributes, controller) {}
};
}
};
var roundprogress = {
//compile里面先对dom进行操作, 再对$socpe进行监听;
compile: compilationfunction,
replace: true
};
return roundprogress;
}]);
</script>
</body>
</html>
这里给大家分享一个angularjs结合canvas画图例子,效果非常不错，赞一个先。
复制代码 代码如下:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head>
<body ng-controller="mainctrl">
<!--
界面的这个元素会被替换成canvas元素;
-->
<div ang:round:progress data-round-progress-model="roundprogressdata"></div>
<br>
<input type="number" ng-model="roundprogressdata.label"/>
<script>
//引用angular.directives-round-progress这个模块;
var app = 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>
/*!
* angularjs round progress directive
*
* copyright 2013 stephane begaudeau
* released under the mit license
*/
angular.module('angular.directives-round-progress', []).directive('angroundprogress', [function () {
var compilationfunction = function (templateelement, templateattributes, transclude) {
if (templateelement.length === 1) {
//初始化dom模型, 包括初始化canvas等;
var node = templateelement[0];
var width = node.getattribute('data-round-progress-width') || '400';
var height = node.getattribute('data-round-progress-height') || '400';
var canvas = 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);
//各种配置;
var outercirclewidth = node.getattribute('data-round-progress-outer-circle-width') || '20';
var innercirclewidth = node.getattribute('data-round-progress-inner-circle-width') || '5';
var outercirclebackgroundcolor = node.getattribute('data-round-progress-outer-circle-background-color') || '#505769';
var outercircleforegroundcolor = node.getattribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';
var innercirclecolor = node.getattribute('data-round-progress-inner-circle-color') || '#505769';
var labelcolor = node.getattribute('data-round-progress-label-color') || '#12eeb9';
var outercircleradius = node.getattribute('data-round-progress-outer-circle-radius') || '100';
var innercircleradius = node.getattribute('data-round-progress-inner-circle-radius') || '70';
var labelfont = node.getattribute('data-round-progress-label-font') || '50pt calibri';
return {
pre: function prelink(scope, instanceelement, instanceattributes, controller) {
var expression = canvas.getattribute('data-round-progress-model');
//监听模型, o了
//就监听一个属性;
scope.$watch(expression, function (newvalue, oldvalue) {
// create the content of the canvas
//包括新建和重绘;
var ctx = canvas.getcontext('2d');
ctx.clearrect(0, 0, width, height);
// the "background" circle
var x = width / 2;
var y = height / 2;
ctx.beginpath();
ctx.arc(x, y, parseint(outercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint(outercirclewidth);
ctx.strokestyle = outercirclebackgroundcolor;
ctx.stroke();
// the inner circle
ctx.beginpath();
ctx.arc(x, y, parseint(innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint(innercirclewidth);
ctx.strokestyle = innercirclecolor;
ctx.stroke();
// the inner number
ctx.font = labelfont;
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.fillstyle = labelcolor;
ctx.filltext(newvalue.label, x, y);
// the "foreground" circle
var startangle = - (math.pi / 2);
var endangle = ((math.pi * 2 ) * newvalue.percentage) - (math.pi / 2);
var anticlockwise = false;
ctx.beginpath();
ctx.arc(x, y, parseint(outercircleradius), startangle, endangle, anticlockwise);
ctx.linewidth = parseint(outercirclewidth);
ctx.strokestyle = outercircleforegroundcolor;
ctx.stroke();
}, true);
},
post: function postlink(scope, instanceelement, instanceattributes, controller) {}
};
}
};
var roundprogress = {
//compile里面先对dom进行操作, 再对$socpe进行监听;
compile: compilationfunction,
replace: true
};
return roundprogress;
}]);
</script>
</body>
</html>
以上就是angularjs结合canvas画图例子的全部代码了，希望大家能够喜欢。