作品链接
https://codepen.io/SampleTape/full/baGbjE/
主要方法
- arc()
- triangle()
- translate()
- rotate()
- push()
- pop()
草图
过程分解
初始化:新建一块画板
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
一、将坐标轴移至窗口顶部中心,画一个圆弧
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
function draw(){
noFill();//没有填充色
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
arc(0,0,200, 200,0,PI);//画一个圆弧
}
二、在圆弧右端画一个三角形(彩旗)
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
arc(0,0,200, 200,0,PI);//画一个圆弧
triangle(140,0, 100, -20, 100,20);//画一个三角形
}
三、将坐标轴顺时针旋转30deg继续绘制三角形(彩旗)
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
arc(0,0,200, 200,0,PI);//画一个圆弧
triangle(140,0, 100, -20, 100,20);//画一个三角形
rotate(PI/ 6);//将坐标轴旋转30deg
triangle(140,0, 100, -20, 100,20);//画第二个三角形
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//画第三个三角形
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//画第四个三角形
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//画第五个三角形
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//画第六个三角形
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//画第七个三角形
}
四、把重复操作简化为for循环
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
arc(0,0,200, 200,0,PI);//画一个圆弧
for(var i = 0; i < 7; i++){//循环七次
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
}
五、给彩旗设置填充色
1、先声明一个保存颜色对象的数组
colors = [
{//LightSalmon
"r":255,
"g":160,
"b":122
},
{//Azure3
"r":193,
"g":205,
"b":205
},
{//Gold1
"r":255,
"g":215,
"b":0
}
];
2、以colors数组元素的r,g,b属性,设置fill()方法的r,g,b三个参数值。
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);
arc(0,0,200, 200,0,PI);
for(var i = 0; i < 7; i++){
fill(colors[i%3].r,colors[i%3].g,colors[i%3].b);
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
}
六、绘制多组彩旗
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//设置背景颜色
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
for(var j = 0; j < 5 ; j++){
push();//push()与pop()之间对坐标系进行操作(例如:平移、旋转)不会对整体坐标系造成影响。
translate(windowWidth / 4 * j, -30);//每次迭代将坐标轴向右平移屏幕的四分之一,并向上平移30。
arc(0,0,200, 200,0,PI);
for(var i = 0; i < 7 ; i++){
fill(colors[i%3].r,colors[i%3].g,colors[i%3].b);
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
pop();
}
}
完整代码
colors = [
{//LightSalmon
"r":255,
"g":160,
"b":122
},
{//Azure3
"r":193,
"g":205,
"b":205
},
{//Gold1
"r":255,
"g":215,
"b":0
}
];
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
for(var j = 0; j < 5 ; j++){
push();
translate(windowWidth / 4 * j, -30);
arc(0,0,200, 200,0,PI);
for(var i = 0; i < 7 ; i++){
fill(colors[i%3].r,colors[i%3].g,colors[i%3].b);
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
pop();
}
}