Example of angularJS combined with canvas drawing_AngularJS

Here I would like to share with you an example of angularJS combined with canvas drawing. The effect is very good. Please give it a thumbs up.

Copy code The code is as follows:

   
 


 
   

<script><br /> //Reference the module angular.directives-round-progress;<br /> var APP = angular.module('APP', ['angular.directives-round-progress']).<br /> controller('MainCtrl', function($scope) {<br />            $scope.roundProgressData = {<br /> ​​​​​ //This is initialized data;<br /> label: 11,<br /> percentage: 0.11<br /> }<br /> //Redraw the canvas of the interface by listening to the roundProgressData property under the scope;<br /> $scope.$watch('roundProgressData', function (newValue) {<br /> newValue.percentage = newValue.label / 100;<br />          }, true);<br /> });<br /> </script>
<script><br /> /*!<br /> * AngularJS Round Progress Directive<br /> *<br /> * Copyright 2013 Stephane Begaudeau<br /> * Released under the MIT license<br /> */<br /> angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {<br /> var compilationFunction = function (templateElement, templateAttributes, transclude) {<br /> If (templateElement.length === 1) {<br /> //Initialize DOM model, including initializing canvas, etc.;<br /> var node = templateElement[0];<br /> var width = node.getAttribute('data-round-progress-width') || '400';<br /> var height = node.getAttribute('data-round-progress-height') || '400';<br /> var canvas = document.createElement('canvas');<br /> ​​ canvas.setAttribute('width', width);<br />        canvas.setAttribute('height', height);<br /> Canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));<br /> ​​​​ //Equivalent to demo, replacing the original elements;<br /> Node.parentNode.replaceChild(canvas, node);<br /> ​​​​ //Various configurations;<br /> var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';<br /> var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';<br /> var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769';<br /> var outerCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';<br /> var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';<br /> var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9';<br /> var outerCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100';<br /> var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70';<br /> var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri';<br />        return {<br />             pre: function preLink(scope, instanceElement, instanceAttributes, controller) {<br />            var expression = canvas.getAttribute('data-round-progress-model');<br />                                                                                                                                                                                                                                                                                       // Monitoring model, O<br /> ​​​​​​ //Just listen to one attribute; scope.$watch(expression, function (newValue, oldValue) {<br /> // Create the content of the canvas<br />            //包括新建和重绘;<br />             var ctx = canvas.getContext('2d');<br />             ctx.clearRect(0, 0, width, height);<br />             // The "background" circle<br />             var x = width / 2;<br />             var y = height / 2;<br />             ctx.beginPath();<br />             ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);<br />             ctx.lineWidth = parseInt(outerCircleWidth);<br />             ctx.strokeStyle = outerCircleBackgroundColor;<br />             ctx.stroke();<br />             // The inner circle<br />             ctx.beginPath();<br />             ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);<br />             ctx.lineWidth = parseInt(innerCircleWidth);<br />             ctx.strokeStyle = innerCircleColor;<br />             ctx.stroke();<br />             // The inner number<br />             ctx.font = labelFont;<br />             ctx.textAlign = 'center';<br />             ctx.textBaseline = 'middle';<br />             ctx.fillStyle = labelColor;<br />             ctx.fillText(newValue.label, x, y);<br />             // The "foreground" circle<br />             var startAngle = - (Math.PI / 2);<br />             var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);<br />             var anticlockwise = false;<br />             ctx.beginPath();<br />             ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise);<br />             ctx.lineWidth = parseInt(outerCircleWidth);<br />             ctx.strokeStyle = outerCircleForegroundColor;<br />             ctx.stroke();<br />           }, true);<br />         },<br />         post: function postLink(scope, instanceElement, instanceAttributes, controller) {}<br />       };<br />     }<br />   };<br />   var roundProgress = {<br />       //compile里面先对dom进行操作, 再对$socpe进行监听;<br />     compile: compilationFunction,<br />     replace: true<br />   };<br />   return roundProgress;<br /> }]);<br /> </script>

以上就是angularJS结合canvas画图例子的全部代码了，希望大家能够喜欢。