angularJS结合canvas画图例子

这里给大家分享一个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画图例子的全部代码了，希望大家能够喜欢。

赞 (0)

相关推荐

  • Android 游戏开发之Canvas画布的介绍及方法

    Canvas,在英语中,这个单词的意思是帆布.在Android中,则把Canvas当做画布,只要我们借助设置好的画笔(Paint类)就可以在画布上绘制我们想要的任何东西:另外它也是显示位图(Bitmap类)的核心类.随用户的喜好,Canvas还可设置一些关于画布的属性,比如,画布的颜色.尺寸等.Canvas提供了如下一些方法:    Canvas(): 创建一个空的画布,可以使用setBitmap()方法来设置绘制具体的画布.    Canvas(Bitmap bitmap): 以bitmap对

  • 使用JavaScript+canvas实现图片裁剪

    canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法.我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作. canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为300*150; 好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 复制代码 代码如下: var selectObj = null; function ImageCrop(c

  • JS实现简单的Canvas画图实例

    定义变量:[javascript] 复制代码 代码如下: var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"

  • 纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1.反色 2.灰色调 3.模糊 4.浮雕 5.雕刻 6.镜像 滤镜原理解释: 1.反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b) 2.灰色调:获取一个像素点RGB值r, g, b则新的RGB值为 复制代码 代码如下: newr = (r * 0.272) + (g

  • canvas 画布在主流浏览器中的尺寸限制详细介绍

    canvas 画布在主流浏览器中的尺寸限制详细介绍 通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小.但在各浏览器下,设置canvas尺寸时发现有最大尺寸限制.测试一下与大家分享. 测试代码 <!DOCTYPE html> <html> <h

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • PHP实现将HTML5中Canvas图像保存到服务器的方法

    本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas

  • javascript基于HTML5 canvas制作画箭头组件

    javascript基于HTML5 canvas制作画箭头组件

    样例: 废话少说,直接上代码: arrow.js /** * 实现两点间画箭头的功能 * @author mapleque@163.com * @version 1.0 * @date 2013.05.23 */ ;(function(window,document){ if (window.mapleque==undefined) window.mapleque={}; if (window.mapleque.arrow!=undefined) return; /** * 组件对外接口 */

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • js生成缩略图后上传并利用canvas重绘

    一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv

随机推荐