canvas画布

一、canvas介绍

canvas 是 HTML5 提供的一种新标签。 <canvas></canvas>

canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。

canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

可以设置 width 和 height 属性，不要用 CSS 控制它的宽和高,会走出图片拉伸。直接在标签设置进行了。

注意：有些浏览器不兼容 canvas，绘制前先设置一下。

二、基本绘制

2.1 线段、三角形

Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。

var canvas = document.getElementById('cavsElem'); //获得画布
var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl

canvas 坐标系：从最左上角 0,0 开始。x 向右增大， y 向下增大

设置绘制起始点   ctx.moveTo(x, y);

绘制直线  ctx.lineTo(x, y);

开始路径  ctx.beginPath();

闭合路径  ctx.closePath();

描边  ctx.stroke();

填充  ctx.fill();

绘制三角形：

//绘制三角形
ctx.beginPath(); //开始路径
ctx.moveTo(100, 100); //三角形，左顶点
ctx.lineTo(300, 100); //右顶点
ctx.lineTo(300, 300); //底部的点
ctx.closePath(); //结束路径
ctx.stroke(); //描边路径
ctx.fill();//填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

2.2 绘制矩形

创建矩形  ctx.rect(x, y, width, height);

绘制一个矩形图案（填充） ctx.fillRect(x, y, width, height);

绘制矩形边框  ctx.strokeRect(x, y, width, height);

清除某个矩形内的绘制的内容   ctx.clearRect(x, y, width, hegiht);

2.3 绘制圆形

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);

 - x,y：圆心坐标。 - r：半径大小。 - sAngle:绘制开始的角度。 圆心到最右边点是 0 度，顺时针方向弧度增大。 - eAngel:结束的角度，注意是弧度。π - counterclockwise：是否是逆时针。true 是逆时针，false：顺时针 - 弧度和角度的转换公式： rad = deg\*Math.PI/180;

2.4 绘制文字

font 设置或返回文本内容的当前字体属性，font 属性使用的语法与 CSS font 属性相同。

例如：ctx.font = "18px '微软雅黑'";

textAlign 设置或返回文本内容的当前对齐方式；

• start : 默认。文本在指定的位置开始。
• end : 文本在指定的位置结束。
• center: 文本的中心被放置在指定的位置。
• left : 文本左对齐。
• right : 文本右对齐。

例如：ctx.textAlign = 'left';

textBaseline 设置或返回在绘制文本时使用的当前文本基线;

• alphabetic ： 默认。文本基线是普通的字母基线。
• top ： 文本基线是 em 方框的顶端。。
• hanging ： 文本基线是悬挂基线。
• middle ： 文本基线是 em 方框的正中。
• ideographic： 文本基线是 em 基线。
• bottom ： 文本基线是 em 方框的底端。

例如： ctx.textBaseline = 'top';

2.5 绘制图片

基本绘制图片方式  ctx.drawImage(img,x,y);  img是绘制图片的dom对象。

在画布上绘制图像，并规定图像的宽度和高度  ctx.drawImage(img,x,y,width,height);

图片裁剪，并在画布上定位被剪切的部分  

ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

sx,sy 裁剪的左上角坐标， swidth：裁剪图片的高度。 sheight:裁剪的高度

三、Canvas 颜色样式

3.1 设置填充和描边的颜色

• fillStyle : 设置或返回用于填充绘画的颜色
• strokeStyle: 设置或返回用于笔触的颜色

以上两个值都可以接受颜色名,16 进制数据，rgb 值，甚至 rgba. 一般先进行设置样式然后进行绘制。

例如：

ctx.strokeStyle = 'red';
ctx.strokeStyle = '#ccc';
ctx.strokeStyle = 'rgb(255,0,0)';
ctx.strokeStyle = 'rgba(255,0,0,6)';

3.2 阴影(性能差)

• 类比于 CSS3 的阴影。
• shadowColor ： 设置或返回用于阴影的颜色
• shadowBlur ： 设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
• shadowOffsetX： 设置或返回阴影距形状的水平距离
• shadowOffsetY： 设置或返回阴影距形状的垂直距离