学习Canvas API：掌握各种API实现有趣的绘画技巧

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
</script>

ctx.fillStyle = "red"; // 设置填充颜色
ctx.fillRect(10, 10, 100, 50); // 绘制矩形

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.strokeStyle = "green"; // 设置线条颜色
ctx.lineWidth = 5; // 设置线条宽度
ctx.beginPath();
ctx.moveTo(10, 10); // 设置起点坐标
ctx.lineTo(100, 100); // 设置终点坐标
ctx.stroke(); // 绘制线条

var image = new Image();
image.src = "image.jpg";
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

ctx.globalAlpha = 0.5; // 设置透明度为50%

ctx.shadowColor = "gray"; // 设置阴影颜色
ctx.shadowBlur = 10; // 设置阴影模糊程度
ctx.shadowOffsetX = 5; // 设置阴影水平偏移量
ctx.shadowOffsetY = 5; // 设置阴影垂直偏移量

var gradient = ctx.createLinearGradient(0, 0, 100, 0); // 创建线性渐变
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空Canvas内容
  // 执行绘制过程
  requestAnimationFrame(draw);
}
// 开始动画
requestAnimationFrame(draw);