·  阅读 3620

# 樱花

## canvas

``````var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

### 绘制路径

``````function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath(); //新建一条path
ctx.moveTo(50, 50); //把画笔移动到指定的坐标
ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
ctx.stroke(); //绘制路径。
}
draw();

### 绘制圆形

``````function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
ctx.stroke();
}
draw();

### 弧度

``````const rad = 180 / π

### cos 和 sin

``````const cos = Math.cos(2 * rad)
const sin = Math.sin(2 * rad)

## 开始绘制

``````class Flower {
r = r;
color = color;
cx = 800;
cy = 500;
}

### 花瓣

`````` const x0 = cx + R * Math.cos((a * part) / rad);
const y0 = cy + R * Math.sin((a * part) / rad);

``````const x1 = cx + R1 * Math.cos((a * part + 2 * part / 6) / rad);
const y1 = cy + R1 * Math.sin((a * part + 2 * part / 6) / rad);

``````ctx.moveTo(cx, cy);

``````const x0 = cx + R * Math.cos((a * part) / rad);
const y0 = cy + R * Math.sin((a * part) / rad);

const x1 = cx + R1 * Math.cos((a * part + 2 * part / 6) / rad);
const y1 = cy + R1 * Math.sin((a * part + 2 * part / 6) / rad);

// 这个点其实在中点，也就是 37.5°的地方
const x2 = cx + R * Math.cos((a * part + 3 * part / 6) / rad);
const y2 = cy + R * Math.sin((a * part + 3 * part / 6) / rad);

const x3 = cx + R1 * Math.cos((a * part + 4 * part / 6) / rad);
const y3 = cy + R1 * Math.sin((a * part + 4 * part / 6) / rad);

const x4 = cx + R * Math.cos((a * part + part) / rad);
const y4 = cy + R * Math.sin((a * part + part) / rad);

// petal
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.fill();
ctx.stroke();

### 花蕊

``````const ax0 = cx + R / 3 * Math.cos((a * part + 2 * part / 6) / rad);
const ay0 = cy + R / 3 * Math.sin((a * part + 2 * part / 6) / rad);
const ax1 = cx + R / 2 * Math.cos((a * part + 3 * part / 6) / rad);
const ay1 = cy + R / 2 * Math.sin((a * part + 3 * part / 6) / rad);
const ax2 = cx + R / 3 * Math.cos((a * part + 4 * part / 6) / rad);
const ay2 = cy + R / 3 * Math.sin((a * part + 4 * part / 6) / rad);

`````` ctx.arc(ax0, ay0, 2, 0, 2 * Math.PI)

``````const { ctx, cx, cy, r: R } = this
ctx.save();
ctx.strokeStyle = "#fff";

const ax0 = cx + R / 3 * Math.cos((a * part + 2 * part / 6) / rad);
const ay0 = cy + R / 3 * Math.sin((a * part + 2 * part / 6) / rad);
const ax1 = cx + R / 2 * Math.cos((a * part + 3 * part / 6) / rad);
const ay1 = cy + R / 2 * Math.sin((a * part + 3 * part / 6) / rad);
const ax2 = cx + R / 3 * Math.cos((a * part + 4 * part / 6) / rad);
const ay2 = cy + R / 3 * Math.sin((a * part + 4 * part / 6) / rad);
let ary = []
// 如果半径大于40
if (R > 40) {
ary = [{
x: ax0,
y: ay0
}, {
x: ax1,
y: ay1
}, {
x: ax2,
y: ay2
}];
} else {
ary = [{
x: ax1,
y: ay1
}];
}

ctx.beginPath();
for (let i = 0; i < ary.length; i++) {
ctx.moveTo(cx, cy);
ctx.lineTo(ary[i].x, ary[i].y);
ctx.arc(ary[i].x, ary[i].y, 2, 0, 2 * Math.PI)
}
ctx.stroke();
ctx.restore();