ここでは、AngularjsとCanvasで描画の例を共有します。最初のように、その効果は非常に良いです。
コードコピーは次のとおりです。
<！doctype html>
<html ng-app = "app">
<head>
<メタcharset = "utf-8">
<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"> </script>
</head>
<body ng-controller = "mainctrl">
<！ -
インターフェイスのこの要素は、キャンバス要素に置き換えられます。
- >
<div ang：Round：Progress data-round-progress-model = "roundprogressdata"> </div>
<br>
<入力型= "number" ng-model = "roundprogressdata.label"/>
<スクリプト>
// Angular.Directives-Round-Progressモジュールを引用します。
var app = angular.module（ 'app'、['angular.directives-round-progress']）。
コントローラー（ 'mainctrl'、function（$ scope）{
$ scope.roundprogressdata = {
//これは初期化されたデータです。
ラベル：11、
パーセンテージ：0.11
}
//スコープの下でRoundProgressDataプロパティを聞くことにより、インターフェイスキャンバスを再描画します。
$ scope。$ watch（ 'roundprogressdata'、function（newValue）{
newValue.Percentage = newValue.Label / 100;
}、 真実）;
}）;
</script>
<スクリプト>
/*！
* AngularJSラウンド進行指令
*
* Copyright 2013 Stephane Begaudeau
* MITライセンスの下でリリースされました
*/
angular.module（ 'angular.directives-round-progress'、[]）。ディレクティブ（ 'angoundprogress'、[function（）{{
var compilationfunction = function（templateElement、templateattributes、translate）{
if（templateElement.length === 1）{
//キャンバスなどを初期化するなど、DOMモデルを初期化します。
var node = templateElement [0];
var width = node.getAttribute（ 'round-progress-width'）|| 「400」;
var height = node.getAttribute（ 'round-progress-height'）|| 「400」;
var canvas = document.createelement（ 'canvas'）;
canvas.setattribute（ 'width'、width）;
canvas.setattribute（ 'height'、height）;
canvas.setattribute（ 'round-progress-model'、node.getattribute（ 'round-progress-model'））;
//デモに相当し、元の要素を置き換えます。
node.parentnode.replacechild（canvas、node）;
//さまざまな構成。
var outourcirclewidth = node.getAttribute（ 'Data-Round-Progress-Outer-Circle-Width'）|| '20';
var innercirclewidth = node.getAttribute（ 'データラウンドプログレス-inner-circle-width'）|| '5';
var outercirclebackgroundcolor = node.getAttribute（ 'Data-Round-Progress-Outer-Circle-Background-Color'）|| '＃505769';
var outourcircleforegroundcolor = node.getattribute（ 'data-round-progress-outer-circle-foreground-color'）|| '＃12eeb9';
var innercirclecolor = node.getAttribute（ 'データラウンドプログレス-inner-color'）|| '＃505769';
var labelcolor = node.getAttribute（ 'round-progress-label-color'）|| '＃12eeb9';
var outourcircleradius = node.getAttribute（ 'Data-Round-Progress-Outer-Circle-Radius'）|| 「100」;
var innercircleradius = node.getAttribute（ 'Data-Round-Progress-Inner-Circle-Radius'）|| '70';
var Labelfont = node.getAttribute（ 'round-progress-label-font'）|| '50pt calibri';
戻る {
pre：function prelink（scope、instancelement、instanceattributes、controller）{
var expression = canvas.getAttribute（ 'Data-Round-Progress-Model'）;
//監視モデル、o
//属性を聞くだけです。
scope。$ watch（expression、function（newValue、oldValue）{
//キャンバスのコンテンツを作成します
//新しい作成と再描画を含む。
var ctx = canvas.getContext（ '2d'）;
ctx.ClearRect（0、0、幅、高さ）;
//「背景」円
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（）;
//内側の円
ctx.beginpath（）;
ctx.arc（x、y、parseint（innercircleradius）、0、math.pi * 2、false）;
ctx.linewidth = parseint（innercirclewidth）;
ctx.strokestyle = innercirclecolor;
ctx.stroke（）;
//内部数
ctx.font = labelfont;
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.fillstyle = labelcolor;
ctx.filltext（newvalue.label、x、y）;
//「前景」円
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（）;
}、 真実）;
}、
投稿：function postlink（scope、instancelement、instanceattributes、controller）{}
};
}
};
var roundprogress = {
//コンパイルで、最初にDOMで操作してから、$ socpeで聞きます。
コンパイル：compilationfunction、
交換：true
};
rundprogressを返します。
}]）;
</script>
</body>
</html>
上記は、AngularJのコード全体とCanvasの描画例です。誰もがそれを好きになることを願っています。