Javascript jquery不适用于diango

我对这个代码有问题。我无法在html页面中看到的效果。我将DJANGO框架与python结合使用

我在django项目中将jquery添加到了我的settings.py中，但是我应该做些什么使它与django兼容吗

var canvas = $('canvas')[0];
var context = canvas.getContext('2d');

var Dots = [];
var ID = 0;
var colors = ['#FF9900', '#424242', '#BCBCBC', '#3299BB','#B9D3B0','#81BDA4','#F88F79', '#F6AA93'];
var maximum = 100;

function Dot() {
  this.active = true;
  this.id = ID; ID++;

  this.diameter = 2 + Math.random() * 7;

  this.x = Math.round(Math.random() * canvas.width);
  this.y = Math.round(Math.random() * canvas.height);

  this.velocity = {
    x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.4,
    y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.4
  };

  this.alpha = 0.1;
  this.maxAlpha = this.diameter < 5 ? 0.3 : 0.8;
  this.hex = colors[Math.round(Math.random() * 7)];
  this.color = HexToRGBA(this.hex, this.alpha);
}

Dot.prototype = {
  Update: function() {
    if(this.alpha <= this.maxAlpha) {
      this.alpha += 0.005;
      this.color = HexToRGBA(this.hex, this.alpha);
    }

    this.x += this.velocity.x;
    this.y += this.velocity.y;

    if(this.x > canvas.width + 5 || this.x < 0 - 5 || this.y > canvas.height + 5 || this.y < 0 - 5) {
      this.active = false;
    }
  },

  Draw: function() {
    context.strokeStyle = this.color;
    context.fillStyle = this.color;
    context.save();
    context.beginPath();
    context.translate(this.x, this.y);
    context.moveTo(0, -this.diameter);

    for (var i = 0; i < 7; i++)
    {
      context.rotate(Math.PI / 7);
      context.lineTo(0, -(this.diameter / 2));
      context.rotate(Math.PI / 7);
      context.lineTo(0, -this.diameter);
    }

    if(this.id % 2 == 0) {
      context.stroke();
    } else {
      context.fill();
    }

    context.closePath();
    context.restore();
  }
}

function Update() {
  GenerateDots();

  Dots.forEach(function(Dot) {
    Dot.Update();
  });

  Dots = Dots.filter(function(Dot) {
    return Dot.active;
  });

  Render();
  requestAnimationFrame(Update);
}

function Render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  Dots.forEach(function(Dot) {
    Dot.Draw();
  });
}

function GenerateDots() {
  if(Dots.length < maximum) {
    for(var i = Dots.length; i < maximum; i++) {
      Dots.push(new Dot());
    }
  }

  return false;
}

function HexToRGBA(hex, alpha) {
  var red = parseInt((TrimHex(hex)).substring(0, 2), 16);
  var green = parseInt((TrimHex(hex)).substring(2, 4), 16);
  var blue = parseInt((TrimHex(hex)).substring(4, 6), 16);

  return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
}

function TrimHex(hex) {
  return (hex.charAt(0) == "#") ? hex.substring(1, 7) : hex;
}

function WindowSize(width, height) {
  if(width != null) { canvas.width = width; } else { canvas.width = window.innerWidth; }
  if(height != null) { canvas.height = height; } else { canvas.height = window.innerHeight; }

}

$(window).resize(function() {
  Dots = [];
  WindowSize();
});

WindowSize();
GenerateDots();
Update();

var canvas=$（'canvas'）[0]；
var context=canvas.getContext（'2d'）；
var Dots=[]；
var-ID=0；
变量颜色=['#FF9900'、'#424242'、'#BCBCBC'、'#3299BB'、'#B9D3B0'、'#81BDA4'、'#F88F79'、'#F6AA93'；
var最大值=100；
函数点（）{
this.active=true；
this.id=id；id++；
this.diameter=2+Math.random（）*7；
this.x=Math.round（Math.random（）*canvas.width）；
this.y=Math.round（Math.random（）*canvas.height）；
这个速度={
x：（Math.random（）<0.5？-1:1）*Math.random（）*0.4，
y：（Math.random（）<0.5？-1:1）*Math.random（）*0.4
};
这个α=0.1；
this.maxapha=this.diameter<5？0.3:0.8；
this.hex=colors[Math.round（Math.random（）*7）]；
this.color=HexToRGBA（this.hex，this.alpha）；
}
Dot.prototype={
更新：函数（）{
if（this.alpha canvas.width+5 | | this.x<0-5 | | | this.y>canvas.height+5 | | this.y<0-5）{
this.active=false；
}
},
绘图：函数（）{
context.strokeStyle=this.color；
context.fillStyle=this.color；
context.save（）；
context.beginPath（）；
翻译（this.x，this.y）；
移动到（0，-此直径）；
对于（变量i=0；i<7；i++）
{
循环（Math.PI/7）；
context.lineTo（0，-（this.diameter/2））；
循环（Math.PI/7）；
lineTo（0，-此直径）；
}
如果（this.id%2==0）{
stroke（）；
}否则{
context.fill（）；
}
closePath（）；
restore（）；
}
}
函数更新（）{
GenerateDots（）；
Dots.forEach（函数（Dot）{
更新（）；
});
点=点。过滤器（功能（点）{
返回点。激活；
});
Render（）；
requestAnimationFrame（更新）；
}
函数Render（）{
clearRect（0，0，canvas.width，canvas.height）；
Dots.forEach（函数（Dot）{
Dot.Draw（）；
});
}
函数GenerateDots（）{
如果（点长度<最大值）{
对于（var i=Dots.length；i<最大值；i++）{
点。按（新点（））；
}
}
返回false；
}
函数HexToRGBA（hex，alpha）{
var red=parseInt（（TrimHex（hex））。子字符串（0,2,16）；
var green=parseInt（（TrimHex（hex））。子字符串（2,4,16）；
var blue=parseInt（（TrimHex（hex））。子字符串（4,6,16）；
返回“rgba”（“+red+”、“+green+”、“+blue+”、“+alpha+”）”；
}
函数TrimHex（十六进制）{
返回（十六进制字符（0）=“#”）十六进制子字符串（1，7）：十六进制；
}
功能窗口大小（宽度、高度）{
if（width！=null）{canvas.width=width；}else{canvas.width=window.innerWidth；}
if（height！=null）{canvas.height=height；}else{canvas.height=window.innerHeight；}
}
$（窗口）。调整大小（函数（）{
Dots=[]；
WindowSize（）；
});
WindowSize（）；
GenerateDots（）；
更新（）；

我发现了问题…（愚蠢的一个） 我在浏览器控制台中遇到此错误。ReferenceError:$未定义

---

我只需要在jquery代码之前加载jquery库。

浏览器控制台中是否有错误？您可能需要将初始化代码包装在jquery就绪语句中

$（（）=>{WindowSize（）；GenerateDots（）；Update（）；}）

实际上是的。我在浏览器控制台中遇到此错误…ReferenceError:$未定义…我不明白您关于我做什么的观点。。。