如何在reveal.js幻灯片中的自定义画布中继承背景?

时间:2018-02-13 02:31:29

标签: javascript p5.js reveal.js

我正在尝试复制在此博客http://vda-lab.github.io/2016/07/interactive-visualizations-in-revealjs-markdown#上完成的内容,以便在reveal.js幻灯片中使用自定义JavaScript文件进行交互式幻灯片。我们怎样才能使下面的脚本继承reveal.js幻灯片的背景颜色?

var viz_function = function(p) {
   p.setup = function() {
   var myCanvas = p.createCanvas(800,600)
   myCanvas.parent('viz2')
   p.noStroke()
   p.noLoop() 
   }

   p.draw = function() {
      p.background(255,255,255) //Setting this manually will work; but it will not be a generic solution
      p.fill(0,255,0)
      p.ellipse(p.mouseX,p.mouseY,20,20)
    }

   p.mouseMoved = function() {
       p.redraw()
   }
 }
var viz = new p5(viz_function)

一个明显的解决方案是手动设置背景颜色。但是,如果要改变reveal.js的主题,那么这种方法将会失败。什么是从幻灯片或reveal.js主题继承背景颜色的更通用的方法?

1 个答案:

答案 0 :(得分:0)

使用clear()功能清除旧框架而不绘制具有特定颜色的背景。

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  clear();
  ellipse(mouseX, mouseY, 20, 20);
}

可以在the reference找到更多信息。