HTML5中的canvas

HTML5中的<canvas>标签用于绘制图像，但它本身并没有绘图的能力，需要使用js进行绘制图形！

js中的getContext() 方法可以返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

类如下列的使用方法：

1、绘制矩形

<canvas  id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");//获取canvas
var ctx = canvas.getContext("2d"); //创建一个2D的getContext()的对象 
ctx.fillStyle = "blue"; // 设置绘制图像为蓝色
ctx.fillRect(20,20,150,150); //设置为填充绘画颜色
</script>

fillRect(x0,y0,x1,y1)的作用是填充图像四个参数都是以<canvas>的绘图区域为坐标,

分别为：

x0 : 起始的x轴坐标

y0 : 起始的y轴坐标

x1 : 结束的x轴坐标

y1 : 结束的y轴坐标

strokeRect(x0,y0,x1,y1)的作用是绘制一个矩形（没有填充），参数与上面的相同

如图所示：

2、绘制直线

beginPath() 起始一条路径，或重置当前路径(就像是拿起笔说我拿笔了，准备画图了)

moveTo(x,y) 把开始路径移动到画布中的指定点，不创建线条（也可以理解为开始点）

lineTo(x,y) 添加一个新点，然后在画布中创建从该点到最后指定点的线条，同时也会创建连接起始点的线条

stroke() 绘制已定义的路径

参数：

x ：x轴坐标 y ：y轴坐标

如下所示绘制一个“v”

var canvas = document.getElementById("myCanvas");//获取canvas
var ctx = canvas.getContext("2d"); //创建一个2D的getContext()的对象 
ctx.beginPath(); 
ctx.moveTo(20,20); 
ctx.lineTo(50,90)
ctx.lineTo(80,20)
ctx.stroke();

若想要绘制直线只需写有一个lineTo(x,y)即可

3、绘制圆

arc(x,y,r,sAngle,eAngle,counterclockwise)

参数：

x : 圆心坐标的x轴

y : 圆心坐标的y轴

r ：圆的半径

sAngle ：绘制圆的起始角位置，以弧度计算

eAngle ：绘制圆的结束角位置，以弧度计算

counterclockwise ：确定是以顺时针绘制，还是逆时针绘制 False = 顺时针，true = 逆时针。（可选）

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); 
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

若绘制实心圆，stroke()改为fill()即可，ctx.fillStyle = "blue" 设置填充色

4、渐变

context.createLinearGradient(x0,y0,x1,y1);方法创建线性的渐变对象。

参数：

x0 : 渐变起始的x轴坐标

y0 : 渐变起始的y轴坐标

x1 : 渐变结束的x轴坐标

y1 : 渐变结束的y轴坐标

gradient.addColorStop(stop,color); stop 规定渐变对象中的颜色和停止位置介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,200,100);

将结束坐标给为y轴上则为横向渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1); 方法创建圆的渐变对象。

参数：

x0 : 渐变起始的x轴坐标

y0 : 渐变起始的y轴坐标

r0 : 渐变起始的半径

x1 : 渐变结束的x轴坐标

y1 : 渐变结束的y轴坐标

r1 : 渐变结束的半径

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,200,100);