Canvas drawing example of angular

An example of angular:

Run the following code

/ / reference the module angular.directives-round-progress; var APP = angular.module ('APP', [' angular.directives-round-progress']). Controller ('MainCtrl', function ($scope) {$scope.roundProgressData = {/ / this is the initialized data; label: 11, percentage: 0.11} / / redraw the canvas of the interface by listening on the roundProgressData attribute under scope; $scope.$watch (' roundProgressData', function (newValue) {newValue.percentage = newValue.label / 100) }, true);}); / *! * AngularJS RoundProgress 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) {/ / initialize DOM model, including initializing canvas, etc.) 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')); / / equivalent to demo, replacing the original element; Node [XSS _ clean] .replaceChild (canvas, node); / / various configurations; var outerCircleWidth = node.getAttribute ('data-round-progress-outer-circle-width') | |' 20' Var innerCircleWidth = node.getAttribute ('data-round-progress-inner-circle-width') | |' 54th; 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 percent; var outerCircleRadius = node.getAttribute ('data-round-progress-outer-circle-radius') | |' 100percent; var innerCircleRadius = node.getAttribute ('data-round-progress-inner-circle-radius') | |' 70percent; 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'); / / listens to the model and listens to an attribute when it is over; scope.$watch (expression, function (newValue, oldValue) {/ / Create the content of the canvas / / includes new and redrawn 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, first operate on dom, then listen on $socpe; compile: compilationFunction, replace: true}; return roundProgress;}])

New channel IELTS