angularJS结合canvas画图的实现
这篇文章主要介绍了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元素;
-->
<p ang:round:progress data-round-progress-model="roundProgressData"></p>
<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>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
实例详解angularjs和ajax的结合使用_AngularJS
javascript结合Canvas 实现简易的圆形时钟_javascript技巧
Atas ialah kandungan terperinci angularJS结合canvas画图的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sekolah mana yang menggunakan kanvas?
Aug 18, 2023 pm 05:59 PM
Sekolah yang menggunakan kanvas termasuk Universiti Stanford, MIT, Universiti Columbia, Universiti California, Berkeley, dsb. Pengenalan terperinci: 1. Universiti Stanford menggunakan Kanvas sebagai platform pembelajaran dalam talian utamanya. Guru dan pelajar di Universiti Stanford menggunakan Kanvas untuk mengurus dan menyampaikan kandungan kursus, dan belajar melalui fungsi seperti perbincangan dalam talian, penyerahan tugasan dan peperiksaan Institut Politeknik dan MIT juga menggunakan Kanvas sebagai sistem pengurusan pembelajaran dalam talian mereka dan menjalankan pengurusan kursus melalui platform Canvas 3. Columbia University, dsb.
Apakah pemalam anak panah kanvas?
Aug 21, 2023 pm 02:14 PM
Pemalam anak panah kanvas termasuk: 1. Fabric.js, yang mempunyai API yang ringkas dan mudah digunakan serta boleh mencipta kesan anak panah tersuai 2. Konva.js, yang menyediakan fungsi melukis anak panah dan boleh mencipta pelbagai anak panah gaya; 3. Pixi.js , yang menyediakan fungsi pemprosesan grafik yang kaya dan boleh mencapai pelbagai kesan anak panah; ; 6. Rough .js, anda boleh membuat anak panah yang dilukis dengan tangan, dsb.
Apakah butiran jam kanvas?
Aug 21, 2023 pm 05:07 PM
Butiran jam kanvas termasuk penampilan jam, tanda semak, jam digital, jam, minit dan jarum kedua, titik tengah, kesan animasi, gaya lain, dsb. Pengenalan terperinci: 1. Penampilan jam, anda boleh menggunakan Kanvas untuk melukis dail bulat sebagai penampilan jam, dan anda boleh menetapkan saiz, warna, jidar dan gaya dail lain. 2. Garisan skala, lukis garisan skala; dail untuk mewakili jam atau minit. 3. Jam digital, anda boleh melukis jam digital pada dail untuk menunjukkan jam dan minit semasa
Apakah versi html2canvas yang ada?
Aug 22, 2023 pm 05:58 PM
Versi html2canvas termasuk html2canvas v0.x, html2canvas v1.x, dsb. Pengenalan terperinci: 1. html2canvas v0.x, yang merupakan versi awal html2canvas Versi stabil terkini ialah v0.5.0-alpha1. Ia adalah versi matang yang telah digunakan secara meluas dan disahkan dalam banyak projek;
Ketahui rangka kerja kanvas dan terangkan rangka kerja kanvas yang biasa digunakan secara terperinci
Jan 17, 2024 am 11:03 AM
Terokai rangka kerja Kanvas: Untuk memahami apakah rangka kerja Kanvas yang biasa digunakan, contoh kod khusus diperlukan Pengenalan: Kanvas ialah API lukisan yang disediakan dalam HTML5, yang melaluinya kita boleh mencapai kesan grafik dan animasi yang kaya. Untuk meningkatkan kecekapan dan kemudahan melukis, banyak pembangun telah membangunkan rangka kerja Kanvas yang berbeza. Artikel ini akan memperkenalkan beberapa rangka kerja Kanvas yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memperoleh pemahaman yang lebih mendalam tentang cara menggunakan rangka kerja ini. 1. Rangka kerja EaselJS Ea
uniapp melaksanakan cara menggunakan kanvas untuk melukis carta dan kesan animasi
Oct 18, 2023 am 10:42 AM
Cara menggunakan kanvas untuk melukis carta dan kesan animasi dalam uniapp memerlukan contoh kod khusus 1. Pengenalan Dengan populariti peranti mudah alih, semakin banyak aplikasi perlu memaparkan pelbagai carta dan kesan animasi pada terminal mudah alih. Sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js, uniapp menyediakan keupayaan untuk menggunakan kanvas untuk melukis carta dan kesan animasi. Artikel ini akan memperkenalkan cara uniapp menggunakan kanvas untuk mencapai kesan carta dan animasi serta memberikan contoh kod khusus. 2. kanvas
Apakah sifat yang dimiliki oleh tkinter canvas?
Aug 21, 2023 pm 05:46 PM
Atribut kanvas tkinter termasuk bg, bd, relief, lebar, ketinggian, kursor, latar belakang sorotan, warna sorotan, ketebalan sorotan, latar belakang sisipan, lebar sisipan, latar belakang pilih, latar belakang pilih, atribut perintah xscroll, dsb. Pengenalan terperinci
Terokai peranan berkuasa dan aplikasi kanvas dalam pembangunan permainan
Jan 17, 2024 am 11:00 AM
Fahami kuasa dan aplikasi kanvas dalam pembangunan permainan Gambaran Keseluruhan: Dengan perkembangan pesat teknologi Internet, permainan web menjadi semakin popular di kalangan pemain. Sebagai bahagian penting dalam pembangunan permainan web, teknologi kanvas telah muncul secara beransur-ansur dalam pembangunan permainan, menunjukkan kuasa dan aplikasinya yang berkuasa. Artikel ini akan memperkenalkan potensi kanvas dalam pembangunan permainan dan menunjukkan aplikasinya melalui contoh kod tertentu. 1. Pengenalan kepada teknologi kanvas Kanvas ialah elemen baharu dalam HTML5, yang membolehkan kami menggunakan
