Canvas学习笔记

2023.12.15

按照官方的文档安装production,安装了Ubuntu 20.04.6 LTS服务器版。安装过程比较顺利,除了git clone试了多次才成功。

命令

sudo npm install -g npm@latest

没有执行成功,提示nodejs的版本低了,执行下面的命令

$ curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
$ sudo apt-get install nodejs
$ sudo npm install -g npm@latest

成功。

下面的命令执行时报错:

sysadmin@appserver:/var/canvas$ sudo gem install bundler --version 2.4.19
sysadmin@appserver:/var/canvas$ bundle config set --local path vendor/bundle
sysadmin@appserver:/var/canvas$ bundle install

提示版本2.4.20,把上面的命令中的版本修改为.2.4.20再重复执行,执行过程较慢,要耐性等待。

实际上执行bundle install时 虽然提示版本2.4.20,但是会自动安装bundler 2.4.20。执行命令bundle install报错,查了一下ruby的版本,是3.1.2p20。安装文档推荐Ruby3.1,并指出Ruby3.1+支持未测试。

按照安装文档,需要进行如下设置:

LoadModule passenger_module /usr/lib/apache2/modules/mod_passenger.so
PassengerRoot /usr
PassengerRuby /usr/bin/ruby

不知道PassengerRoot和PassengerRuby的正确值,可用用下面的命令获得:

passenger-config --root

passenger-config --ruby-command

安装进行中......

2024/02/11

能顺利访问github了,Canvas-LMS终于安装成功。

设置缓冲服务器redis,但是报信息 redis Connection refused。

2024/02/17

需要启动redis

sudo /etc/init.d/redis-server start

查看redis是否启动

sudo /etc/init.d/redis-server status

2024/02/18

将VMware Workstation的虚拟机转换为Docker镜像需要以下步骤:

安装Docker和VMware Workstation软件。
在VMware Workstation中,使用“导出”功能将虚拟机导出为OVF格式。
在命令行中运行以下命令将OVF转换为Docker镜像:
$ docker import my-vmware-image.ova my-docker-image:tag

其中,my-vmware-image.ova是你导出的OVF文件名,my-docker-image是你要创建的Docker镜像的名称,tag是你要为该镜像设置的标签。 4. 运行以下命令创建一个Docker容器并启动它:

$ docker run -it my-docker-image:tag /bin/bash

这将创建一个基于你的VMware Workstation虚拟机的Docker容器,并在其中启动一个交互式bash会话。

OVF文件是什么?

OVF是Open Virtualization Format的缩写,是一种开放的虚拟机格式,它使用XML文件描述虚拟机的配置信息、操作系统和应用程序等内容,以便在不同的虚拟化平台之间进行移植和交换。OVF文件通常包括一个或多个虚拟磁盘文件(VMDK、VHD等)和一个描述虚拟机配置的XML文件。

2024/02/19

VMware Workstation可以导出ovf和ova格式的文件,上面的操作应该是先导出ova格式的文件,然后从ova格式的文件转换为docker镜像,但是容器不能启动。

使用windows 11 wsl docker,拉取dmtr/canvas-lms-prod,然后用下面的命令启动容器:

 sudo docker run -d -p 22:22 -p 3000:3000 -p 5432:5432 -p 6379:6379 dmtr/canvas-lms-prod

在windows 11主机浏览器地址输入:

http://172.30.45.12:3000/

显示canvas-lms登录页面。

Windows(172.30.32.1)

wsl(172.30.45.12,172.17.0.1)

docker容器(172.17.0.2)

不知道canvas-lms的登录账号和密码,因为不能访问hub.docker.com,看不到关于dmtr/canvas-lms-prod的说明。

2024/02/26

用docker建立canvas-lms开发环境非常简单,只需要安装docker和运行脚本文件:

script/docker_dev_setup.sh

在windows 11家庭版+wsl环境用docker建立canvas-lms开发环境时的问题主要有网络速度问题,npm源问题和drop 数据库问题。在script/common/utils/common.sh中增加npm换源命令:

npm config set registry https://registry.npmmirror.com

运行脚本文件时报文件夹权限问题,修改文件夹权限。运行过程可能由于网络速度中断,重新执行脚本文件。最终建立开发环境成功。

但是不知道默认的用户账号和密码,不能登录。

电脑重启动后,用docker-compose up -d启动容器,好像不能显示登录页面。

停止所有容器的命令如下:

docker stop $(docker ps -a | awk '{ print $1}' | tail -n +2)

重启动所有容器的命令如下:

docker start $(docker ps -a | awk '{ print $1}' | tail -n +2)

重启动所有容器,可显示登录页面。

tag为none的镜像文件可能是执行脚本产生的中间过渡镜像文件。

删除所有tag为none的镜像文件用如下的命令:

docker rmi $(docker images | grep "^<none>" | awk "{print $3}")

删除所有的镜像文件用如下的命令:

docker rmi $(docker images -q)

清理镜像

我们在使用 Docker 一段时间后,系统一般都会残存一些临时的、没有被使用的镜像文件,可以通过以下命令进行清理:

docker image prune

清理后剩下的镜像文件如下图:

Navicat Premium 16可以连接postgresql,但是容器内的postgresql只允许本地访问,不方便修改配置文件。 

需要修改两个配置文件:pg_hba.conf 和 postgresql.conf。

pg_hba.conf 配置PostgreSQL数据库的访问权限。

找到“# IPv4 local connections:“后,回车另起一行,添加参数行如下,保存。
host all all 0.0.0.0/0 trust
其中0.0.0.0/0表示运行任意ip地址访问

postgresql.conf 配置PostgreSQL数据库服务器的相应的参数。

找到“listen_addresses“参数后,设置listen_addresses = ‘*’,保存。

2024/02/27

wsl canvas-lms开发环境进入postgresql容器和操作数据库

docker exec -it 容器ID /bin/sh        #进入容器

su postgres        #切换用户

psql                     #进入sql命令行

\l                        #列出数据库

\c dbname        #选择数据库

\d tablename        #显示数据表结构

在Linux命令行输入数据库导出、导入命令:

pg_dump -h localhost -U postgres(用户名) 数据库名(缺省时同用户名)>/data/dum.sql

#特别注意:数据库名与'>' 之间不能存在空格

#例如,导出整个数据库
$pg_dump -h localhost -U postgres canvas_production>canvas_production.sql
#例如,导入sql文件
psql -U postgres canvas_production <canvas_production.sql

 

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas红包雨是一种基于HTML5 Canvas技术开发的节日效果,通过JavaScript控制红包的下落和动画效果,实现一个红包雨的动态效果。 下面是Canvas红包雨的开发流程: 1. HTML页面中添加Canvas画布,并设置画布的宽高和样式。 ```html <canvas id="canvas"></canvas> ``` ```css #canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } ``` 2. 在JavaScript中获取Canvas画布对象,并设置画布的宽高。 ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ``` 3. 定义红包对象,包括红包的位置、速度、大小和颜色等属性。 ```javascript function RedPacket(x, y, vx, vy, size, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.color = color; } ``` 4. 在Canvas画布上绘制红包,并实现红包的下落和动画效果。 ```javascript var redPackets = []; // 存储红包对象的数组 function drawRedPacket(redPacket) { ctx.beginPath(); ctx.arc(redPacket.x, redPacket.y, redPacket.size, 0, 2 * Math.PI); ctx.fillStyle = redPacket.color; ctx.fill(); } function updateRedPacket(redPacket) { redPacket.x += redPacket.vx; redPacket.y += redPacket.vy; redPacket.vy += gravity; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < redPackets.length; i++) { drawRedPacket(redPackets[i]); updateRedPacket(redPackets[i]); } requestAnimationFrame(animate); } requestAnimationFrame(animate); ``` 5. 实现红包的自动生成和动态效果,可以通过setInterval或setTimeout定时调用生成红包的函数。 ```javascript function createRedPacket() { var x = Math.random() * canvas.width; var y = -20; var vx = Math.random() * 6 - 3; var vy = Math.random() * 2 + 2; var size = Math.random() * 10 + 10; var color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机生成颜色 var redPacket = new RedPacket(x, y, vx, vy, size, color); redPackets.push(redPacket); } setInterval(createRedPacket, 500); // 每500ms生成一个红包 ``` 6. 实现红包的点击事件,当用户点击红包时,可以实现红包爆炸效果,并显示红包金额或祝福语。 ```javascript function explodeRedPacket(redPacket) { var particles = []; // 存储爆炸粒子的数组 for (var i = 0; i < 20; i++) { var particle = { x: redPacket.x, y: redPacket.y, vx: Math.random() * 6 - 3, vy: Math.random() * 6 - 3, size: Math.random() * 3 + 1, color: redPacket.color }; particles.push(particle); } for (var i = 0; i < particles.length; i++) { drawRedPacket(particles[i]); } } canvas.addEventListener('click', function(event) { var x = event.clientX; var y = event.clientY; for (var i = 0; i < redPackets.length; i++) { var redPacket = redPackets[i]; if (x > redPacket.x - redPacket.size && x < redPacket.x + redPacket.size && y > redPacket.y - redPacket.size && y < redPacket.y + redPacket.size) { explodeRedPacket(redPacket); redPackets.splice(i, 1); break; } } }); ``` 上述就是Canvas红包雨的开发流程,通过Canvas技术和JavaScript实现红包的下落、动画、自动生成和点击事件等效果,可以增加网站的趣味性和用户互动性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值