OpenSesame
Rapunzel Code Editor
DataMatrix
Support forum
Python Tutorials
MindProbe
OpenSesame videos
Python videos
Supported by Supported by

画布功能

Canvas类用于呈现视觉刺激。您通常可以通过Canvas()工厂函数创建一个Canvas对象。因为Canvas()是一个函数,所以调用它时需要使用new。JavaScript Canvas类模仿了相应的Python Canvas类。

__样式关键词__可以传递给所有接受styleArgs的函数。样式关键词也可以设置为Canvas对象的属性。有关样式关键词的概述,请参阅Python Canvas文档

重要提示: JavaScript不支持命名参数(或称:关键字)。因此,参数通过带有命名属性和默认值的Object传递。就像这样:

var myCanvas = Canvas()
// (正确)将参数作为对象传递...
myCanvas.fixdot({color: 'red'})
// (错误)...而不是作为命名参数
// myCanvas.fixdot(color='red')
myCanvas.show()

Canvas.arrow(obj)

绘制一个箭头。箭头是由7个顶点组成的多边形,箭头指向(ex,ey)。

参数 类型 默认值
obj Object
obj.sx Number 0
obj.sy Number 0
obj.ex Number 50
obj.ey Number 0
obj.body_length Number 0.8
obj.body_width Number 0.5
obj.head_width Number 30
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
var w = vars.width / 2
var h = vars.height / 2
// 重要:参数作为一个对象传递
myCanvas.arrow({sx: 0, sy: 0, w: w, h: h, head_width:100, body_length:0.5})

Canvas.clear([styleArgs])

以当前背景颜色清除画布。注意,通常使用不同的画布为每个实验 显示比使用单个画布并反复清除和重绘 这是更快的。

参数 类型 默认值
[styleArgs] Object {}

示例

var myCanvas = Canvas()
myCanvas.fixdot({color: 'green'})
myCanvas.show()
// 做某事
myCanvas.clear()
myCanvas.fixdot({color: 'red'})
myCanvas.show()

Canvas.circle(obj)

绘制一个圆。

参数 类型 默认值
obj Object
obj.x Number 0
obj.y Number 0
obj.r Number 50
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.circle({x: 100, y: 100, r: 50, fill: true, color:'red'})

Canvas.ellipse(obj)

绘制一个椭圆。

参数 类型 默认值
obj Object
obj.x Number -50
obj.y Number -25
obj.w Number 100
obj.h Number 50
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.ellipse({x: -10, y: -10, w: 20, h: 20, fill:true})

Canvas.fixdot(obj)

绘制一个固定点。默认样式为中等打开。

  • 'large-filled' 是一个半径为 16px 的实心圆。
  • 'medium-filled' 是一个半径为 8px 的实心圆。
  • 'small-filled' 是一个半径为 4px 的实心圆。
  • 'large-open' 是一个半径为 16px,中心区域为 2px 空隙的实心圆。
  • 'medium-open' 是一个半径为 8px,中心区域为 2px 空隙的实心圆。
  • 'small-open' 是一个半径为 4px,中心区域为 2px 空隙的实心圆。
  • 'large-cross' 是一个 16px 的十字形。
  • 'medium-cross' 是一个 8px 的十字形。
  • 'small-cross' 是一个 4px 的十字形。
参数 类型 默认值
obj Object
obj.x Number 0
obj.y Number 0
obj.style String 'default'
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.fixdot()

Canvas.gabor(obj)

绘制一个 gabor 斑块。

参数 类型 默认值
obj Object
obj.x Number 0
obj.y Number 0
obj.orient Number 0
obj.freq Number .1
obj.env String 'gaussian'
obj.size Number 96
obj.stdev Number 12
obj.phase Number 0
obj.col1 String 'white'
obj.col2 String 'black'
obj.bgmode String 'avg'
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.gabor({x: 100, y: 100, orient: 45, freq: .05})

Canvas.image(obj)

从文件池的文件中绘制图像。

参数 类型 默认值
obj Object
obj.fname String
obj.center Boolean true
obj.x Number 0
obj.y Number 0
obj.scale Number 1
obj.rotation Number 0
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.image({fname: 'image_in_pool.png'})

Canvas.line(obj)

绘制直线。

参数 类型 默认值
obj Object
obj.sx Number 0
obj.sy Number 0
obj.ex Number 50
obj.ey Number 0
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
var ex = vars.width / 2
var ey = vars.height / 2
myCanvas.line({sx: 0, sy: 0, ex: ex, ey: ey})

Canvas.noise_patch(obj)

绘制一个具有包络的噪声补丁。

参数 类型 默认值
obj Object
obj.x Number 0
obj.y Number 0
obj.env String 'gaussian'
obj.size Number 96
obj.stdev Number 12
obj.col1 String 'white'
obj.col2 String 'black'
obj.bgmode String 'avg'
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.noise_patch({x: 100, y: 100, env: 'circular'})

Canvas.polygon(obj)

绘制由顶点列表定义的多边形。即由线连接的点构成的形状。

参数 类型 默认值
obj Object
obj.vertices Array.<Array.<Number>>
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
var n1 = [0,0]
var n2 = [100, 100]
var n3 = [0, 100]
myCanvas.polygon({vertices: [n1, n2, n3]})

Canvas.rect(obj)

绘制矩形。

参数 类型 默认值
obj Object
obj.x Number -50
obj.y Number -25
obj.w Number 100
obj.h Number 50
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.rect({x: -10, y: -10, w: 20, h: 20, fill:true})

Canvas.show() ⇒ Number

显示或"翻转"屏幕上的画布。

返回: Number - 画布出现在屏幕上的时间的时间戳。

Canvas.text(obj)

绘制文本。

参数 类型 默认值
obj Object
obj.text String
obj.center Boolean true
obj.x Number 0
obj.y Number 0
..obj.styleArgs Object {}

示例

var myCanvas = Canvas()
myCanvas.text({text: 'Some text'})
Supported by Supported by