canvas 基础

什么是 Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的getContext() 方法HTML DOM getContext() 方法")获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

canvas 绘制

路径

moveTo(x,y):线条的起始位置
lineTo(x,y):线条的结束位置

线条

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

8AD50F74-07E9-4902-9CBA-10ACEF14B50F.png

圆形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

C2F9123E-7765-4E80-96D0-13B23360EBE2.png

文本

使用 canvas 绘制文本，重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本
• textBaseline( type )-设置基准线
• textAlign( type )-设置文字对齐方式

context.textBaseline = "middle";
context.textAlign = "center";
context.font="bold 50px Arial";
//fillText("文字",x,y)
context.fillText("hello",100,100);

渐变

线性渐变：createLinearGradient(x1,y1,x2,y2)
x1 渐变开始点的 x 坐标
y1 渐变开始点的 y 坐标
x2 渐变结束点的 x 坐标
y2 渐变结束点的 y 坐标
圆心渐变：createRadialGradient(x0,y0,r0,x1,y1,r1)
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径

var grd = context.createLinearGradient(0,0,200,0);
var grd = context.createRadialGradient(250,250,100,250,250,200);