var myCanvas = document.getElementById('Canvas');
var context = myCanvas.getContext('2d');
xy轴坐标
#### 3. 矩形
截图，简化怪兽跟飞机都是矩形
context.fillRect(x,y，宽，高)； 绘制的是实心矩形
context.strokeRect(x,y，宽，高)；绘制的是空心矩形
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(10,10,20,20);
context.strokeRect(10,200,200,200);
#### 4. 线条 (路径)
context. beginPath 告诉 Canvas 要开始绘图了
context. moveTo 调用 moveTo 来移动画笔的笔触
context. lineTo 设置路径需要经过的位置
context. closePath 自动闭合路径
context. fill / context. stroke 绘制路径
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(20,50);
context.lineTo(150,200);
context.lineTo(20,200);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(180,140);
context.lineTo(230,200);
context.lineTo(180,200);
context.closePath();
context.fill();
#### 5. [资料] 绘制圆弧
##### 绘制圆弧
讲解下如何在 canvas 画布上 绘制圆弧和圆形。
相对矩形来说，绘制圆弧则更为复杂。绘制圆弧需要确定圆心的坐标，圆弧的角度以及绘制圆弧的绘制方法等等。
##### context.arc()
在 Canvas 中我们可以使用 context.arc() 的方法来创建圆弧路径。简单来说，在 Canvas 中，创建一条圆弧路径是从
与圆心(x, y)距离为一个半径且角度为开始角度的位置开始，最后停在离圆心(x, y)距离为一个半径且角度为结束角度的位置上。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
参数说明：
x: 圆的中心的 x 坐标
y: 圆的中心的 y 坐标
radius: 圆的半径
startAngle: 圆弧的开始角度
endAngle: 圆弧的结束角度
anticlockwise: 可选的参数，规定应该逆时针还是顺时针绘图，默认值为 false
##### 弧度表示角度
这里需要注意的是，在 Canvas 中表示圆弧的开始角度和结束角度都是以弧度来表示的，而不是使用角度来表示。
举个例子: 360度使用弧度来表示则是 2π (pi 的两倍)弧度。
我们可以通过下面的公式进行换算。
var degree = 1; // 表示 1°
var radians = degree * (Math.PI / 180); // 0.0175弧度
##### 绘制圆弧路径
接下来让我们尝试绘制一个圆弧，如下图：
具体代码如下：
// 开始创建新路径
context.beginPath();
// 创建一个半圆圆弧
context.arc(250, 250, 200, 0, Math.PI, false);
// 调用 stroke 绘制该路径
context.stroke();
##### 绘制部分圆
接下来让我们尝试绘制一个部分圆形填充图形，如下图：
// 开始创建新路径
context.beginPath();
// 创建一个圆弧
context.arc(250, 250, 200, 0, 0.75 * Math.PI, false);
// 填充该圆弧
context.fill();
##### 绘制圆形
圆形实际上是由圆弧组成（首尾相连的圆弧便是圆形）,如果我们需要绘制下面的圆形：
具体代码如下：
// 开始创建新路径
context.beginPath();
// 设置开始角度为0，结束角度为 2π 弧度
context.arc(250, 250, 200, 0, 2 * Math.PI, false);
// 使用 fill 自动闭合圆弧路径，然后填充圆弧区域
context.fill();
##### 绘制圆角矩形
我们不仅可以使用 context.arc() 来绘制圆弧和圆形，我们还可以来绘制圆角矩形上的圆角。如下图为我们需要绘制一个圆角矩形：
var x = 120; // 圆角矩形左上角横坐标
var y = 120; // 圆角矩形左上角纵坐标
var width = 250; // 圆角矩形的宽度
var height = 250; // 圆角矩形的高度
var radius = 50; // 圆角的半径
// 开始创建新路径
context.beginPath();
// 绘制左上角圆角
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
// 绘制顶边路径
context.lineTo(width - radius + x, y);
// 绘制右上角圆角
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
// 绘制右边路径
context.lineTo(width + x, height + y - radius);
// 绘制右下角圆角
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
// 绘制底边路径
context.lineTo(radius + x, height +y);
// 绘制左下角圆角
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
// 闭合路径 也可使用 context.lineTo(x, y + radius);
context.closePath();
// 设置绘制的颜色
context.strokeStyle = '#188eee';
context.stroke();
#### 6. 文本:http://coding.imweb.io/demo/p5/canvas-text.html
绘制文本:contex.fillText(text,x,y); / contex.strokeText(text,x,y);
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillText('fillText',200,100);
context.strokeText('strokeText',20,100);
context.font = '60px 黑体';
context.strokeText('strokeText2',20,150);
#### 7. 给图形上色：http://coding.imweb.io/demo/p5/canvas-style.html
设置颜色：context.fillStyle = color; / context.strokeStyle = color;
设置的颜色只会应用于在他之后定义的绘制的命令，如下代码：
必须符合CSS3 颜色值标准
以下fillStyle 的值均为‘红色’
context.fillStyle = "red";
context.fillStyle = "#ff0000";
context.fillStyle = "rgb(255,0,0)";
context.fillStyle = "rgb(255,0,0,1)";
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "red";
//绘制填充的矩形
context.fillRect(50,50,160,160);
context.strokeStyle = 'rgb(0,255,0)';
//绘制矩形的描边
context.strokeRect(250,50,160,160);
//绘制三角形
context.beginPath();
context.moveTo(200,280);
context.lineTo(200,380);
context.lineTo(300,380);
context.fill();
#### 8. 修改线宽
修改线宽：context.lineWindth = number;
* 题目:
* 根据题目要求设置图案的颜色和线宽
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 绘制轮廓颜色为 'rgba(255, 122, 33, 0.5)' 且线宽为 10 的矩形轮廓
context.strokeStyle = 'rgba(255, 122, 33, 0.5)';
context.lineWidth = 10;
context.strokeRect(40, 20, 80, 80);
// 绘制填充颜色为 'green' 的矩形图形
context.fillStyle = "green";
context.fillRect(20, 120, 120, 60);
#### 9. 擦除 Canvas
context.clearRect(x,y,宽,高)；
对象左上角坐标： x,y
对象的宽,高
清除整个画布的描述是：
context.clearRect(0,0,canvas.width,canvas.height)；
