不需要刻意记忆函数或者命令,要学会查用技术文档,而且用多了自然就记住了。
noStroke(); 去除外形轮廓 //驼峰命名法
stroke(255, 0, 0); 线条颜色 默认红色。RGB取色器。三个参数分别代表R,G,B所占比例。
background(r, g, b)
Set the background color,背景色设置
fill(r, g, b)
Set the fill color for shapes, (图形)形状填充色
mouseX, mouseY,可直接调用,但必须在函数内。
mouseX指鼠标X轴坐标,可替换函数内的X值也可替代Y值,会出现不同的效果。图形类函数及颜色类函数均可使用mouseX & mouseY.
如以下代码,跟随鼠标移动的小圆圈。
1 // mouseX and mouseY 2 3 strokeWeight(3); 4 stroke(57, 0, 214); 5 fill(0, 210, 247); 6 7 8 draw = function() { 9 10 background(255, 255, 255); 11 12 ellipse(mouseX, mouseY, 30, 30); 13 14 };
若不使用background,则移动鼠标后,小圆圈会留下残影。效果操作 ps. 博客园不能直接上传图片,有点小遗憾。10月开始可以上传图片了。
使用background则不会留下残影。
对代码进行试验性测试时,可直接在函数前加上“//”,将之变为注释。这样,便于将代码恢复原状。
textFont();中自带textSize参数并有默认值,,故textSize();会与之冲突。因为代码按顺序执行,若以textSize()控制字体大小,需放在textFont();语句之后。
淡入淡出效果,代码如下:
1 var fade = 400; 2 var fade_size = 40; 3 4 draw = function() { 5 background(242, 242, 242); 6 fill(0, 26, 255); 7 textSize(30); 8 text("infocodez", 80+fade, 100); 9 10 fill(0, 26, 255); 11 textSize(30); 12 text("infocodez", 80-fade, 150); 13 14 fill(0, 26, 255); 15 textSize(30+fade_size); 16 text("infocodez", 80, 200);//出现两个字符是因为视觉残留 17 18 fill(0, 26, 255); 19 textSize(30-fade_size); 20 text("infocodez", 80, 250); 21 22 fade *= 0.97; 23 fade_size *= 0.96; 24 };