Canvas

## 功能

 在网页中实时生成图像，并操作图像内容（通俗就是在网页中画画）

1.canvas画布可以制作在线绘图工具,

2.canvas画布可以制作动态数据图纸.常用于网站后台的数据统计功能.

3.canvas画布可以用于制作HTML5游戏

4.canvas画布可以制作app应用.....

## 格式

 < canvas id=“myCanvas” width=“500” height=“300”>

注意:

1.IE9+浏览器支持

2.默认300宽度，150高度

3.不要使用css给canvas设置宽度和高度－导致绘制的图形被缩放

使用:

1.获取Canvas对象（即画布）

var obj = document.querySelector('canvas');

obj.width:画布宽度

obj.height:画布高度

2.获取绘图环境:所有的绘图都以此为基础

var ctx = obj.getContext('2d');

# Canvas绘图图形

## 直线

方法:

moveTo(x,y):将鼠标移动到指定的点

lineTo(x,y):将画笔移动到指定x,y点，形成一条直线

stroke():将点绘制成直线

属性:

lineWidth:直线的厚度

strokeStyle:直线(边框)的颜色

lineCap:直线头尾的样式（不占据原来直线的长度）

butt:默认

round:圆形

square:方形（多出宽度一半的值）

lineJoin:两条直线的夹角的样式

miter:默认尖角

round:圆形

bevel:斜角

## 虚线

moveTo(100,100)

lineTo(400,100)

setLineDash([5,10])        5:线段的长度    10:线段的间距

setLineDash([5,10,15])        复制一份数组元素，循环绘制

setLineDash([5,10,15,20])    奇数线段长度，偶数线段间距

## 矩形

属性:

fillStyle : 填充颜色

strokeStyle : 矩形边框颜色

方法:

fillRect(x，y，w，h) : 绘制矩形框并填充颜色

strokeRect(x，y，w，h) : 绘制矩形框设置边框的颜色

clearRect(x，y，w，h) : 清空指定矩形内容

## 圆弧(圆形)

arc(x，y，radius，start，end，逆true|顺false) : 绘制圆

x,y:圆心横坐标

radisu:圆半径

start:开始弧度

end:结束弧度

逆|顺:顺时针绘制|逆时针绘制

canvas很多都是利用弧度进行计算的

角度和弧度计算公式：弧度 = 角度*Math.PI/180

全圆：2PI(360)

半圆：PI(180)

1/4圆：PI/2(90)

## 曲线

moveTo(移动到指定位置的横坐标，指定位置的纵坐标)

arcTo(第一组控制点的横坐标，纵坐标，第二组控制点的横坐标，纵坐标，圆弧的半径)

二次贝塞尔曲线

quadraticCurveTo(第一组控制点横坐标，第一组控制点纵坐标，第二组控制点横坐标，第二组控制点纵坐标)

context.moveTo(100,200);

context.quadraticCurveTo(200,100,400,300);

三次贝塞尔曲线

bezierCurveTo(第一组控制点横坐标，纵坐标，第二组控制点横坐标，纵坐标，第三组控制点横坐标，纵坐标):三组控制点来掌控曲线方向

context.moveTo(100,200);

context.bezierCurveTo(150,150,300,300,400,100);

## 文本

方法

fillText(text, x, y, [maxWidth]):填充方式绘制文本

strokeText(text, x, y, [maxWidth]):绘制文字边框颜色

文本属性

font属性：跟CSS一样

textAlign属性：设置文字水平对齐方式

start(默认) end left right center

textBaseline属性：文本垂直方式

top hanging middle alphabetic(默认) ideographic bottom

悬挂             字母排序    思想的

measureText():获取文本的宽度

## Canvas全局方法

beginPath()：开启路径

closePath()：关闭路径

Canvas坐标系统：默认坐标原点是元素的左上角位置（0，0）

translate()：平移(横坐标，纵坐标)

注意：将坐标原点移动到指定位置

scale(水平缩放倍数，垂直缩放倍数):缩放

rotate(弧度):旋转的弧度

注意：如果要旋转，默认是以坐标原点旋转的，所以如果要旋转，必须确认坐标原点在哪里

save()：保存之前的状态

restore():恢复保存之前的样式

将这两个方法之间的代码独立，里面的样式设置不会带外面的绘制产生影响

剪辑区域

clip() 用于设定剪辑的区域

注意：使用clip进行了路径剪辑之后所有操作只能在剪辑区域之内进行操作。

使用剪辑区域一般都会在save和restore之间进行操作。

toDataURL():返回当前canvas图像的URLdata信息

## Canvas全局属性

属性：

globalAlpha:设置全局的透明度

globalCompositeOperation：图片合成：

source-over 默认。在目标图像上显示源图像。

source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。

source-out  在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

destination-over  在源图像上方显示目标图像。

destination-atop  在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

destination-in  在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

lighter 显示源图像 + 目标图像。

copy  显示源图像。忽略目标图像。

线性渐变：指定区间的颜色过渡

var color = context.createLinearGradient(起始点横坐标，起始点纵坐标，宽度，高度)

color.addColorStop(偏移值，颜色)

径向渐变(两个圆心的连线进行颜色过渡，两个圆的切线的焦点处进行颜色的扩散)

var color = context.createRadialGradient(开始圆心横坐标，圆心纵坐标，半径，结束圆圆心横坐标，结束圆圆心纵坐标，结束圆的半径);

color.addColorStop(偏移值，颜色)

阴影

阴影颜色

context.shadowColor = 'red';

阴影偏移值

context.shadowOffsetX = 20;

context.shadowOffsetY = 20;

设置模糊值

context.shadowBlur = 4;

## 图片对象

将图片绘制到canvas画布中

drawImage(obj,起始横坐标，纵坐标，[固定宽度]，[固定高度]);

创建图片并设置图片是否重复

var bg = createPattern(obj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向内重复指定的元素

ctx.fillStyle = bg;

像素操作

// 获取canvas画布 指定区间位置 的 像素点集合对象

var obj = ctx.getImageData(起始横坐标，起始纵坐标，宽度，高度)

obj.width:行像素个数

obj.height:列像素个数

obj.data:整体像素组的颜色组成的数组

obj.data.length:像素个数的4倍（1个像素点4个颜色值）

rgba()都是0-255的范围，透明度也是

// 将图像obj写入到指定的canvas区间内

putImageData(obj,起始横坐标，起始纵坐标)

// 创建图像

createImageData(宽度，高度)