javascript - How do you update HTML5 canvas from angular? -
i have little canvas draws cross , input box control angle of rotation.
<input type='text' ng-model='angle'> <canvas id="mylitlecanvas" width="200" height="200"></canvas> <script> var canvas = document.getelementbyid('mylitlecanvas'); var context = canvas.getcontext('2d'); context.save(); context.translate(100, 100); context.rotate({{angle}} * math.pi / 180.0); // <---- problem context.translate(-100, -100); context.beginpath(); context.moveto(100, 0); context.lineto(100, 200); context.moveto(0, 100); context.lineto(200, 100); context.stroke(); </script>
then have simple controller bound angle
function mapctrl($scope) { $scope.angle = 45; }
buti can't seem access angle
or redraw canvas when value in text box changes. possible?
there no token replacement in javascript blocks. recommended way of doing dom manipulation put javascript code directive. have attribute references 'angle' parameter. might want @ angular-ui ideas on doing custom ui directives. hope helps.
Comments
Post a Comment