canvas绘制桃子

Canvas是HTML5中用于绘图的API，你可以通过JavaScript操作它来绘制各种形状，包括图形化的桃子。下面是一个简单的步骤，展示如何使用Canvas在Web上画出一个基本的桃子：

1. 首先，创建一个HTML `<canvas>` 元素，并设置其id，例如 `myCanvas`。

<canvas id="myCanvas" width="400" height="400"></canvas>

2. 使用JavaScript获取Canvas元素并获取它的2D渲染上下文 `ctx`。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

3. 定义桃子的基本形状，比如椭圆（代表桃子主体），以及两个小圆（代表桃核）。你需要计算好半径、位置等参数。

// 桃子主体
var bodyX = canvas.width / 2;
var bodyY = canvas.height / 2;
var bodyWidth = 200;
var bodyHeight = 250;
var bodyColor = '#FFA54F';

// 桃核
var kernelX = bodyX + bodyWidth * 0.8;
var kernelY = bodyY + bodyHeight * 0.6;
var kernelRadius = 10;
var kernelColor = '#8B4513';

4. 绘制桃子主体和核。

ctx.beginPath();
ctx.save(); // 保存当前状态

// 主体
ctx.fillStyle = bodyColor;
ctx.arc(bodyX, bodyY, Math.min(bodyWidth, bodyHeight) / 2, 0, Math.PI * 2);
ctx.fill();

// 核心
ctx.beginPath();
ctx.fillStyle = kernelColor;
ctx.arc(kernelX, kernelY, kernelRadius, 0, Math.PI * 2);
ctx.fill();

ctx.restore(); // 恢复到之前的状态

5. 可选地，你可以添加阴影效果或者纹理，增加真实感。最后记得清除画布背景颜色。

// 添加阴影
ctx.shadowBlur = 10; // 阴影模糊程度
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = 'white'; // 清除背景
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 或者，如果你想要更复杂的形状，可以使用path方法和stroke()、fill()等函数绘制。