javascript - Change border color of canvas in AngularJS -
i learning angularjs @ moment , wrote website contains canvas. goal change color of border after clicking on checkbox.
canvas.html :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas</title> <link rel="stylesheet" type="text/css" href="/canvas/canvas.css"> </head> <body ng-app="nganimate"> <canvas id="mycanvas" width="1200" height="800"></canvas> <script src="/canvas/canvas.js"></script> <h1>change color: <input type="checkbox" ng-model="checkbox"></h1> <div ng-canvasgreen="checkbox"></div> <script src="/scripts/angular.min.js"></script> <script src="/scripts/angular-animate.js"></script> </body> </html> canvas.js
// useful have them global variables var canvas, ctx, mousepos, mousebutton; window.onload = function init() { // called after page has been loaded canvas = document.queryselector("#mycanvas"); // useful w = canvas.width; h = canvas.height; scale = w / 150; // important, draw object ctx = canvas.getcontext('2d'); // ready go ! // filled rectangle ctx.fillstyle = 'red'; ctx.fillrect(10 * scale, 10 * scale, 30 * scale, 30 * scale); // wireframe rectangle ctx.strokestyle = 'green'; ctx.linewidth = 4 * scale; ctx.strokerect(100 * scale, 40 * scale, 40 * scale, 40 * scale); ctx.fillstyle = 'yellow'; ctx.fillrect(100 * scale, 40 * scale, 40 * scale, 40 * scale); // fill circle, use current ctx.fillstyle ctx.beginpath(); ctx.arc(60 * scale, 60 * scale, 10 * scale, 0 * scale, 2 * scale * math.pi); ctx.fill(); // text ctx.fillstyle = "purple"; ctx.font = 20 * scale + "px arial"; ctx.filltext("hello!", 60 * scale, 20 * scale); canvas.addeventlistener('mousemove', function (evt) { mousepos = getmousepos(canvas, evt); var message = 'mouse position: ' + math.round(mousepos.x, 0) + ',' + math.round(mousepos.y,0); writemessage(canvas, message); }, false); canvas.addeventlistener('mousedown', function (evt) { mousebutton = evt.button; var message = "mouse button " + evt.button + " down @ position: " + math.round(mousepos.x,0) + ',' + math.round(mousepos.y,0); writemessage(canvas, message); }, false); canvas.addeventlistener('mouseup', function (evt) { var message = "mouse @ position: " + math.round(mousepos.x,0) + ',' + math.round(mousepos.y,0); writemessage(canvas, message); }, false); } function writemessage(canvas, message) { ctx.save(); ctx.clearrect(0, 0, 600, 50); ctx.font = '18pt calibri'; ctx.fillstyle = 'black'; ctx.filltext(message, 10, 25); ctx.restore(); } function getmousepos(canvas, evt) { // necessary take account css boundaries var rect = canvas.getboundingclientrect(); return { x: evt.clientx - rect.left, y: evt.clienty - rect.top }; } canvas.css
canvas { transition: linear 1.5s; border: 1px solid black; border-width: 15px; } .ng-canvasgreen { border: 1px solid green; border-width: 15px; } the problem have when click on checkbox, nothing happens , border remains black.
try below code
var app = angular.module('nganimate', []); app.controller('myctrl', function($scope) { $scope.changeborder = function(event){ if(event.target.checked == true){ $("canvas").css("border-color","red"); } if(event.target.checked == false){ $("canvas").css("border-color","yellow"); } } // useful have them global variables var canvas, ctx, mousepos, mousebutton; window.onload = function init() { // called after page has been loaded canvas = document.queryselector("#mycanvas"); // useful w = canvas.width; h = canvas.height; scale = w / 150; // important, draw object ctx = canvas.getcontext('2d'); // ready go ! // filled rectangle ctx.fillstyle = 'red'; ctx.fillrect(10 * scale, 10 * scale, 30 * scale, 30 * scale); // wireframe rectangle ctx.strokestyle = 'green'; ctx.linewidth = 4 * scale; ctx.strokerect(100 * scale, 40 * scale, 40 * scale, 40 * scale); ctx.fillstyle = 'yellow'; ctx.fillrect(100 * scale, 40 * scale, 40 * scale, 40 * scale); // fill circle, use current ctx.fillstyle ctx.beginpath(); ctx.arc(60 * scale, 60 * scale, 10 * scale, 0 * scale, 2 * scale * math.pi); ctx.fill(); // text ctx.fillstyle = "purple"; ctx.font = 20 * scale + "px arial"; ctx.filltext("hello!", 60 * scale, 20 * scale); } });canvas { transition: linear 1.5s; border: 1px solid black; border-width: 15px; } .ng-canvasgreen { border: 1px solid green; border-width: 15px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas</title> <link rel="stylesheet" type="text/css" href="/canvas/canvas.css"> </head> <body ng-app="nganimate" ng-controller="myctrl"> <canvas id="mycanvas" width="1200" height="800"></canvas> <script src="/canvas/canvas.js"></script> <h1>change color: <input type="checkbox" ng-click="changeborder($event)" ng-model="checkbox"></h1> <div ng-canvasgreen="checkbox"></div> <script src="/scripts/angular.min.js"></script> <script src="/scripts/angular-animate.js"></script> </body> </html>
Comments
Post a Comment