<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 500px;
}
</style>
<body>
<div ng-controller="homeCtrl">
<input ng-model="first" />
<input ng-model="second" />
</div>
<div ng-controller="indexCtrl">
<input ng-model="first" />
<input ng-model="second" />
<button ng-click="start()">start</button>
<button ng-click="clear()">clear</button>
</div>
</body>
<script src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('wsscat', []);
app.controller('homeCtrl', function($scope) {
$scope.first = 20;
$scope.second = 30;
$scope.$watch('first', function(data) {
console.log(data)
})
})
app.controller('indexCtrl', function($scope, hh, $document, $http, $interval) {
console.log(hh)
$scope.start = function() {
$scope.line = hh.m(0, 0, "indexCtrl");
console.log($scope.line)
//$scope.line.lineTo(50, 60);
$scope.line.lineWidth = 1;
$scope.line.strokeStyle = 'red';
$scope.line.stroke();
}
$scope.start();
$scope.clear = function() {
hh.c()
}
var offset = 5;
$interval(function() {
$http.get('shullfe.php').success(function(data) {
offset += 5;
console.log($scope.line)
$scope.line.lineTo(offset, data);
$scope.line.lineWidth = 0.1;
$scope.line.strokeStyle = 'red';
$scope.line.stroke();
})
}, 1000)
//hh.e("indexCtrl")
//console.log($document[0].querySelectorAll('[ng-controller=indexCtrl]'))
//var canvasList = $document[0].querySelectorAll('[ng-controller=indexCtrl]');
//var canvas = canvasList[0].getElementsByTagName("canvas");
//console.log(canvas[0])
//$scope.$watch('first', function(data) {
// console.log(data)
//})
})
app.service('hh', function($document) {
return {
m: function(a, b, Ctrl) {
var can = this.e(Ctrl);
//var can = $document[0].getElementById('can');
var cans = can.getContext('2d');
cans.moveTo(a, b); //第一个起点
//cans.lineTo(c, d); //第二个点
//cans.lineTo(220, 60); //第三个点（以第二个点为起点）
cans.lineWidth = 1;
//当两条线条交汇时，创建圆形边角
cans.lineJoin = "round";
cans.strokeStyle = 'red';
//cans.stroke();
//返回cans，方便我们在控制器中画图
return cans;
},
//清除画布
c: function() {
var can = $document[0].getElementById('can');
var cans = can.getContext('2d');
cans.clearRect(0, 0, 500, 500);
},
e: function(Ctrl) {
//获取对应控制器下的DOM结构
var canvasList = $document[0].querySelectorAll('[ng-controller=' + Ctrl + ']');
//在上面获取的DOM结构范围内生成一个canvas标签
var canvas = $document[0].createElement('canvas');
//配置canvas的id属性
canvas.id = Ctrl + 'Canvas';
//添加到该DOM结构下
canvasList[0].appendChild(canvas);
//canvas.width = 100;
//canvas.height = 500;
//var canvas = canvasList[0].getElementsByTagName("canvas");这个canvas跟上面的canvas是一样的
return canvas;
}
}
})
</script>
</html>
