画布功能
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
显示或"翻转"屏幕上的画布。
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'})