Canvas 基础——七日打卡

一、Canvas 简介

Canvas 是 HTML5 中的新元素，它可以用来创建和操作位图。位图是使用像素来表示图像的，因此 canvas 可以用来创建各种各样的图形、图像和动画。

二、Canvas 的创建

要使用 canvas，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持，就会显示这些信息。

<canvas id="myCanvas" width="500" height="300"></canvas>

三、Canvas 的绘图

要对 canvas 进行绘图，需要使用 canvas 的 getContext() 方法获取一个绘图上下文对象。绘图上下文对象提供了各种绘图方法，如 strokeRect()、fillRect()、arc() 等。

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

ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);

ctx.strokeStyle = "blue";
ctx.strokeRect(100, 100, 100, 100);

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

四、Canvas 的动画

要使用 canvas 创建动画，需要使用 requestAnimationFrame() 方法。requestAnimationFrame() 方法会告诉浏览器在下次重绘之前调用指定的函数。在函数中，可以更新 canvas 的内容，从而创建动画效果。

function animate() {
  // 更新 canvas 的内容

  requestAnimationFrame(animate);
}

animate();

五、Canvas 的七日打卡计划

为了帮助大家巩固所学知识，这里提供了一个七日打卡计划：

第一天：

• 创建一个 canvas 元素。
• 设置 canvas 的宽高。
• 使用 canvas 的 getContext() 方法获取一个绘图上下文对象。
• 使用绘图上下文对象绘制一个矩形。

第二天：

• 使用绘图上下文对象绘制一个圆形。
• 使用绘图上下文对象绘制一条线段。
• 使用绘图上下文对象绘制一个文本。

第三天：

• 使用绘图上下文对象绘制一个渐变色矩形。
• 使用绘图上下文对象绘制一个阴影矩形。
• 使用绘图上下文对象绘制一个图案矩形。

第四天：

• 使用绘图上下文对象绘制一个动画矩形。
• 使用绘图上下文对象绘制一个动画圆形。
• 使用绘图上下文对象绘制一个动画线段。

第五天：

• 使用绘图上下文对象绘制一个动画文本。
• 使用绘图上下文对象绘制一个动画渐变色矩形。
• 使用绘图上下文对象绘制一个动画阴影矩形。

第六天：

• 使用绘图上下文对象绘制一个动画图案矩形。
• 使用绘图上下文对象绘制一个动画图片。
• 使用绘图上下文对象绘制一个动画视频。

第七天：

• 完成一个 canvas 小项目。
• 将小项目发布到网上。
• 分享小项目的链接。