Javascript 更改AngularJS中画布的边框颜色_Javascript_Html_Css_Angularjs

Javascript 更改AngularJS中画布的边框颜色

javascript html css angularjs

Javascript 更改AngularJS中画布的边框颜色,javascript,html,css,angularjs,Javascript,Html,Css,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/

我正在学习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.css

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

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

我遇到的问题是，当我单击复选框时，什么也没有发生，边框仍然是黑色的。

请尝试下面的代码

var app=角度。模块'ngAnimate'，[]；应用程序控制器'myCtrl'，函数$scope{ $scope.changeborder=functionevent{ ifevent.target.checked==true{ $canvas.cssborder颜色，红色； } ifevent.target.checked==false{ $canvas.cssborder颜色，黄色； } } //将它们作为全局变量很有用 var画布、ctx、鼠标座、鼠标按钮； window.onload=函数初始化{ //加载页面后调用 canvas=document.querySelectormyCanvas； //经常有用 w=画布宽度； h=画布高度；比例=w/150； //重要的是，我们将使用此对象进行绘制 ctx=canvas.getContext'2d'； //准备好了！ //填充矩形 ctx.fillStyle='红色'； ctx.fillRect10*刻度，10*刻度，30*刻度，30*刻度； //线框矩形 ctx.strokeStyle='绿色'； ctx.lineWidth=4*刻度； ctx.strokeRect100*刻度、40*刻度、40*刻度、40*刻度； ctx.fillStyle='黄色'； ctx.fillRect100*刻度、40*刻度、40*刻度、40*刻度； //填充圆，将使用当前ctx.fillStyle ctx.beginPath； ctx.arc60*标度、60*标度、10*标度、0*标度、2*标度*Math.PI； ctx.fill； //一些文本 ctx.fillStyle=紫色； ctx.font=20*scale+px Arial； ctx.fillTextHello！、60*刻度、20*刻度； } }; 帆布{ 过渡：全线性1.5s；边框：1px纯黑；边框宽度：15px； } 伍德林{ 边框：1px纯绿色；边框宽度：15px； } 帆布更改颜色：

马克·舒尔曼（MarkSchuurman）在上面的回答中写道：“你能创作出一把小提琴或plnkr吗？”。如果有任何疑问，请告诉我。非常感谢您的帮助。现在我收到错误“Runtime error JavaScript:$未在第5行中定义。我找到了解决方案：插入此代码以导入jQuery works。

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

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