这是我的第一篇Canvas 基础教程，我先简述一下什么是Canvas 。 H5 新增内容，允许脚本语言动态渲染图像，是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通過一套完整的绘图函数来动态生成图形。一些可能的用途，包括使用 Canvas 构造图形，动画，游戏和图片。 Canvas 对象的属性 height 属性: 画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。 width 属性: 画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。 那Canvas 绘制的图形或动画有哪些优点呢？
比如下面这张图：
先不考虑视频，即便是 gif 动图，这样一张未压缩的图片，大小至少有 4MB ，浏览器渲染这张图片的时候，相当于下载了一首 “流畅” 品质的歌曲，如果你希望这张图片作为背景图，那它会变得十分模糊。 那假设是一幅 Canvas 画布呢？它的大小只有 2KB ，即便你是 2G 网络，它也能够迅速的加载完毕，并且经得住无限放大。唯一的缺点是：图片你只需要往上一拉，而 Canvas 要写100行代码。 Canvas 动画的制作原理 1、更新绘制的对象（比如位置的移动） 2、清除画布 3、在画布上重新绘制对象 简单一句话概括：不断的绘制与清除。 教程开始： 在HTML中添加Canvas非常简单，只需要在 < body> 里，添加上 < canvas> 标签就可以了！标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。可以参考下面的代码。
代码语言：javascript复制<body>
<canvas id="canvas" width="200" height="100">一张Canvas 画布</canvas>
</body> 获取画布
var c=document.getElementById(“canvas”); var ctx=c.getContext(“2d”);
这两段代码必填，这是一个模板，从前期来讲无论你画什么它都不会改变，这里就不细讲了，不容易理解。
Canvas - 文本
font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本
Canvas - 图像
drawImage(image,x,y)
Canvas颜色
ctx.fillStyle = " "
Canvas 坐标
canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0)。 X 坐标向右增加。 Y 坐标向着画布底部增加。
Canvas - 路径
moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标
如果在canvas中绘制圆形，可以使用 arc(x,y,r,start,stop)
Canvas - 渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
画布的使用
ctx.font=“bold 20px Arial”; ctx.textAlign=“Hello W3Cschool”; ctx.fillText(“Hello W3Cschool”, 20, 40);
在canvas 中，transform 属性依然生效，不过被简写为：ctx.translate(x,y)、ctx.rotate(x) 等
需要注意的是：rotate 中不能再填写角度了，应改为：
ctx.rotate((Math.PI / 180) * 25)
意为：顺时针旋转 25 deg
我们来写一个简单的小案例，看一下效果如何：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.translate(100, 150);
ctx.fillText("after translate", 20, 40);
ctx.fillStyle = "gray";
ctx.fillRect(10,10, 100, 100);
ctx.rotate( (Math.PI / 180) * 25);
ctx.fillStyle = "orange";
ctx.fillRect(10,10, 100, 100);
</script>
</body>
</html>
Canvas 最神奇的地方在于不断添加，当你绘制好一个不错的图形时，让它频繁的克隆自身，这样你就得到了 N 个绘制好的图形，这也是开头动画的原理。如：
代码语言：javascript复制<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.strokeRect(10,10,30,20);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,20);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,20);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,20);
</script>效果图：
那我们用刚刚学到的内容做一个小练习：
代码语言：javascript复制<body>
<canvas id="canvas" width="500" height="500">
<script>
var testCanvas = document.getElementById("canvas");
// 获取getContext()对象
var context = testCanvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 100, 100);
// 保存状态（红色）
context.save();
context.fillStyle="blue";
context.fillRect(60, 60, 100, 100);
// 保存状态（蓝色）
context.save();
// 恢复状态（红色）
context.restore();
context.fillRect(120, 120, 100, 100);
// 恢复状态（蓝色）
context.restore();
context.fillRect(180, 180, 100, 100);
context.beginPath();
</script>
</body>看看你得到的图案是不是下面这样：
读到这里，你是不是想问，那些移动的 canvas 动画是如何制作的？
代码语言：javascript复制<style>
.onfo {
width: 600px;
height: 400px;
}
.onfo canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="onfo">
<canvas id="canvas" width="500" height="500">
</div>
<script>
var testCanvas = document.getElementById("canvas");
var context = testCanvas.getContext("2d");
var x = 0;
var y = 0;
var timer = null;
//清除画布 再次绘制（循环操作）
function draw(){
// 不断改变绘制对象的水平位置
x ;
// 清除画布
context.clearRect(0, 0, 600, 400);
context.beginPath();
context.fillStyle = "skyblue";
context.arc(x, 200, 80, 0, 2 * Math.PI, true);
context.closePath();
// 绘制轮廓
context.stroke();
// 填充颜色
context.fill();
}
// 设置计时器
setInterval(draw, 20);
</script>
</body>来看下效果图，是不是和我的一样
