canvas

什么是 canvas?

HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，你可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 Canvas 元素。
规定元素的 id、宽度和高度：(相当于我们创建了一块画布～)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

通过 JavaScript 来绘制

Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

//首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
//然后，获取2d上下文对象
var ctx = c.getContext("2d");

//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

//下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

x y.png

下面是一些方法

1. 开启新路径

ctx.beginPath();

2. 起始点

x是横坐标，y是纵坐标
ctx.moveTo(x, y);

3. 路径

x是横坐标，y是纵坐标
ctx.lineTo(x, y)

4. 闭合路径

ctx.closePath()

5. 描边与填充

ctx.stroke();//线条类的使用
ctx.fill();//形状类的使用

6. 设置描边和填充的颜色

ctx.strokeStyle = '颜色';
ctx.fillStyle = '颜色';

7. 清除画布

ctx.clearRect(x, y, width, height);

8.文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
ctx.textAlign 文本水平对齐方式:left right center
ctx.textBaseline 文本垂直对齐方式:top middel bottom
如：

ctx.font="30px Arial";//使用 "Arial" 字体在画布上绘制一个高 30px 的文字
ctx.fillText("Hello World",10,50);//（实心）
ctx.strokeText("Hello World",10,50);//（空心）

线的样式

1. 线的宽度
   ctx.lineWidth = 线的宽度

2. 线帽（线条两端是什么样子）
   ctx.lineCap = 'butt'默认
   round: 半圆
   square: 方形

圆

圆心:x, y
blur: 半径
start,end: 起始角度，结束角度
boolean: 是否为逆时针(true), 默认顺时针(false))(可选)
ctx.arc(x, y, blur, start, end, boolean)

cxt.arc(500,210,100,0,2*Math.PI);//PI就是圆周率π，PI是弧度制的π,也就是180°
所以，Math.PI = 3.14 = 180°

渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
· createLinearGradient(x1, y1, x2, y2) 创建线性渐变
接受 4 个参分别表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
· createRadialGradient(x1, y1, r1, x2, y2, r2) 创建一个径向/圆渐变
接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
示例：
var lineargradient = ctx.createLinearGradient(0,0,150,150);
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);