angular的例子：

<!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>

angular的canvas画图例子的更多相关文章

  1. SVG和canvas画图，js求数组最大最小值

    windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...

  2. 解决canvas画图模糊的问题

    canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.ge ...

  3. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  4. Canvas画图在360浏览器中跑偏的问题

    问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...

  5. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  7. 使用 canvas 画图时图像文字模糊的解决办法

    最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...

  8. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  9. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

随机推荐

  1. hdu 1003 Max sum(简单DP)

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem ...

  2. linux—【用户和组的管理操作】(5)

    用户:user 组:group 增加:add 修改:modify   mod 删除:delete    del useradd     增加用户 usermod    修改用户 userdel     ...

  3. atomic, spinlock and mutex性能比较

    我非常好奇于不同同步原理的性能,于是对atomic, spinlock和mutex做了如下实验来比较: 1. 无同步的情况 #include <future> #include <i ...

  4. 无向图的最短路径算法JAVA实现

    一,问题描述 给出一个无向图,指定无向图中某个顶点作为源点.求出图中所有顶点到源点的最短路径. 无向图的最短路径其实是源点到该顶点的最少边的数目. 本文假设图的信息保存在文件中,通过读取文件来构造图. ...

  5. SQL里面如何取得前N条数据？

    select * from table order by id limit 10 运用limit可以获取前N个数据

  6. HDU 4082 Hou Yi's secret --枚举

    题意: 给n个点,问最多有多少个相似三角形(三个角对应相等). 解法: O(n^3)枚举点,形成三角形,然后记录三个角,最后按三个角度依次排个序,算一下最多有多少个连续相等的三元组就可以了. 注意:在 ...

  7. C# using 三种使用方式 C#中托管与非托管 C#托管资源和非托管资源区别

    1.using指令.using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到. ...

  8. 3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）

    今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...

  9. 九、Foundation框架中的NSString常用方法

    一.NSString的创建 方式1创建常量字符串 NSString *st = @"this is string!"; //这种方式创建的字符串不需要释放 方式2创建空字符串,给予 ...

  10. shell案例

    调用同目录下的ip.txt内容: 路径 [root@lanny ~]# pwd /root txt文件 [root@lanny ~]# cat ip.txt 10.1.1.1 10.1.1.2 10. ...