上一篇文章我们绘制了三角形，这一篇我们再绘制更复杂一些的吧，
五角星
var can = document.getElementById('can');
var ctx = can.getContext('2d');
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI)*150 + 200,
-Math.sin((18 + i*72)/180*Math.PI) * 150 + 200);
ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI)*75 + 200,
-Math.sin((54 + i*72)/180*Math.PI) * 75 + 200);
}
ctx.closePath();
ctx.lineWidth = 6;
ctx.fillStyle = '#eed873';
ctx.strokeStyle = '#417692';
ctx.fill();
ctx.stroke();
仔细阅读代码你会发现，我们绘制五角星是从圆形出发，在圆形上找到了不同角度的5个点，作为五角星的锐角。然后我们在这个圆形半径一半的位置，也就是比第一次画的圆形更小的圆形上，再确定不同角度5个点，作为五角星的5个钝角。
每个点的距离刚好是圆形360的五分之一，即72度。然后这两个圆形组成的圆环上面的这5个点在彼此错开36度，就能绘制一个漂亮的五角星。
运行结果如下图：
大五角星
为了复用，我们把它封装成函数
function star1(r,R, x, y){
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI)*R + x,
-Math.sin((18 + i*72)/180*Math.PI) * R + y);
ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI)*r + x,
-Math.sin((54 + i*72)/180*Math.PI) * r + y);
}
ctx.closePath();
ctx.lineWidth = 6;
ctx.fillStyle = '#c34b2b';
ctx.strokeStyle = '#263a72';
ctx.fill();
ctx.stroke();
};
star1(57,150,280,280,);
效果如图所示：
封装成函数
它变成正五角星。
正五角星
添加旋转角度，
function star1(r,R, x, y, z){
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i*72 - z)/180 * Math.PI)*R + x,
-Math.sin((18 + i*72 - z)/180*Math.PI) * R + y);
ctx.lineTo(Math.cos((54 + i*72 - z)/180 * Math.PI)*r + x,
-Math.sin((54 + i*72 - z)/180*Math.PI) * r + y);
}
ctx.closePath();
ctx.lineWidth = 6;
ctx.fillStyle = '#c34b2b';
ctx.strokeStyle = '#263a72';
ctx.fill();
ctx.stroke();
};
star1(57,150,280,280,20);
效果如图所示：
旋转
改成圆角
function star1(r,R, x, y, z){
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i*72 - z)/180 * Math.PI)*R + x,
-Math.sin((18 + i*72 - z)/180*Math.PI) * R + y);
ctx.lineTo(Math.cos((54 + i*72 - z)/180 * Math.PI)*r + x,
-Math.sin((54 + i*72 - z)/180*Math.PI) * r + y);
}
ctx.closePath();
ctx.lineWidth = 16;
ctx.lineJoin = 'round';
ctx.fillStyle = '#c34b2b';
ctx.strokeStyle = '#263a72';
ctx.fill();
ctx.stroke();
};
star1(57,150,280,280,20);
运行效果
没有尖角的五角星
再加个for循环，画100个随机的小星星
for (let i = 0; i < 100; i++) {
let r = Math.random() * 10 + 10;
let x = Math.random() * can.width;
let y = Math.random() * can.height;
let z = Math.random() * 360;
star1(r,r/2.0,x,y,z);
}
function star1(r,R, x, y, z){
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i*72 - z)/180 * Math.PI)*R + x,
-Math.sin((18 + i*72 - z)/180*Math.PI) * R + y);
ctx.lineTo(Math.cos((54 + i*72 - z)/180 * Math.PI)*r + x,
-Math.sin((54 + i*72 - z)/180*Math.PI) * r + y);
}
ctx.closePath();
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.fillStyle = '#c34b2b';
ctx.strokeStyle = '#263a72';
ctx.fill();
ctx.stroke();
};
运行效果：
随机生成100个
我们把原来那个三角形也随机生成在画布上
function drawTriangle(x, y, w, h, bW, bC, fC , z1){
var z1 =parseInt( Math.random()*20);
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x + w,y+h/2);
ctx.lineTo(x + z1, y - h);
ctx.closePath();
ctx.lineWidth = bW;
ctx.fillStyle = fC;
ctx.strokeStyle = bC;
ctx.fill();
ctx.stroke();
}
for (let i = 0; i < 100; i++) {
let x = Math.random()* can1.width,
y = Math.random()* can1.height,
w = Math.random()*21 + Math.random()*20,
h = Math.random()*23 + Math.random()*19;
drawTriangle( x,y,w,h,2,'#8ab62f','#fba670');
}
三角形也随机生成了
随机生成三角形