什么是 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);
来源: http://www.jianshu.com/p/b6492855a741