在AngularJS中更改畫布的邊框顏色

我正在學習AngularJS，並且我寫了一個包含畫布的網站。我的目標是在點擊複選框後更改邊框的顏色。在AngularJS中更改畫布的邊框顏色

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 to have them as global variables 
var canvas, ctx, mousePos, mouseButton; 

window.onload = function init() { 
    // called AFTER the page has been loaded 
    canvas = document.querySelector("#myCanvas"); 

    // often useful 
    w = canvas.width; 
    h = canvas.height; 
    scale = w/150; 

    // important, we will draw with this object 
    ctx = canvas.getContext('2d'); 

    // ready to 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, will use current ctx.fillStyle 
    ctx.beginPath(); 
    ctx.arc(60 * scale, 60 * scale, 10 * scale, 0 * scale, 2 * scale * Math.PI); 
    ctx.fill(); 

    // some 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 at position: " + Math.round(mousePos.x,0) + ',' + Math.round(mousePos.y,0); 
     writeMessage(canvas, message); 
    }, false); 

    canvas.addEventListener('mouseup', function (evt) { 
     var message = "Mouse up at 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 to take into account CSS boundaries 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
}

canvas.css

canvas { 
    transition: all linear 1.5s; 
    border: 1px solid black; 
    border-width: 15px; 
} 

.ng-canvasGreen { 
    border: 1px solid green; 
    border-width: 15px; 
}

我已經是當我點擊複選框的問題，沒有任何反應邊界仍然是黑色的。

來源

2017-07-25 Mark Schuurman

你可以創建一個** **工作撥弄或plnkr？ – lin

試試下面的代碼

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 to have them as global variables 
 
var canvas, ctx, mousePos, mouseButton; 
 

 
window.onload = function init() { 
 
    // called AFTER the page has been loaded 
 
    canvas = document.querySelector("#myCanvas"); 
 

 
    // often useful 
 
    w = canvas.width; 
 
    h = canvas.height; 
 
    scale = w/150; 
 

 
    // important, we will draw with this object 
 
    ctx = canvas.getContext('2d'); 
 

 
    // ready to 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, will use current ctx.fillStyle 
 
    ctx.beginPath(); 
 
    ctx.arc(60 * scale, 60 * scale, 10 * scale, 0 * scale, 2 * scale * Math.PI); 
 
    ctx.fill(); 
 

 
    // some text 
 
    ctx.fillStyle = "purple"; 
 
    ctx.font = 20 * scale + "px Arial"; 
 
    ctx.fillText("Hello!", 60 * scale, 20 * scale); 
 
    } 
 
    });

canvas { 
 
    transition: all 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>

來源

2017-07-25 12:19:15 Dhaarani

@Mark Schuurman檢查以上答案。如有任何疑問，請告知我。 – Dhaarani

非常感謝您的幫助。現在我收到錯誤'運行時錯誤JavaScript：$沒有在第5行定義。 –

我找到了解決方案：插入此代碼要導入jQuery的作品。 –

在AngularJS中更改畫布的邊框顏色

回答

相關問題