canvas

图形属性：
fillStyle：填充颜色。
font：绘制文本的时候css字体
globalAlpha：绘制像素时添加的透明度
gloablCompositeOperation：合并新的像素点和下面的像素点
lineCap：渲染线段的末端
lineJoin：渲染顶点
lineWidth：边框的宽度
miterLimit：斜接顶点的最大长度
textAlign：文本水平对齐方式
textBaseline：文本垂直对齐方式
shadowBlur：阴影清晰度或模糊程度
shadowColor：下拉阴影的颜色
shadowOffsetX：阴影的水平偏移量
shadowOffsetY：阴影垂直偏移量
strokeStyle：边框线颜色

图形方法：

fillRect()： x坐标 y坐标 宽度 高度 （绘制矩形）

arc()： x坐标 y坐标 r半径 起始角 结束角 设置顺时针(false)还是逆时针(true)（圆形）

fill()：填充路径

fillRect()： x y 宽度 高度

beginPath()：新路径

moveTo()：新的子路径 有x，y轴

clineTo()：该点与新点通过直线连接 有x，y轴

stroke()：绘制边框线

arcTo()：绘制一条直线与一段圆弧 弧的起始坐标x 弧的起点坐标y 弧的结束坐标x 弧的结束坐标y 弧的半径r

bezierCurveTo()：当前子路径添加一个新点，利用三次贝塞尔曲线相连。

quadrticCurveTo()：与上面类似，只不过它使用二次贝塞尔曲线。

closePath()：边框线闭合

clearRect()：与fillRect()类似 不过它会忽略当前填充样式，采用透明的黑色像素

rect()：用于绘制矩形，会对当前路径产生影响，它会将指定的矩形添加到当前路径的子路径中。

createPattern()：第一参数指定了用做图案的图片，必须是文档中的一个img、canvas或video元素。第二参数通常是repeat，表示采用重复的图片填充。还可以使用repeat-x、repeat-y、no-repeat。

createRadialGradient()：用来创建放射状、圆形渐变对象。
参数为：渐变开始圆的x坐标、y坐标、半径、结束x坐标、结束y坐标、结束半径r

createLinearGradient()：用来创建线性渐变。
参数为：渐变开始的x坐标，y坐标，结束x左边，结束y坐标

addColorStop()：定义渐变的颜色。
参数：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。二参数是css颜色

fillText()：用于给画布添加文本。参数：text、文本x坐标、y、允许文本最大宽度

strokeText()：也是添加文本，不过无填充。参数：同上。

clip()：定义一个裁剪区域，定义了之后，该区域不会绘制任何内容。

save()：此方法将当前状态推送到堆栈上。

restore()：此方法弹出堆栈上的顶级状态，将上下文恢复到该状态。

setTransform()：直接设置画布的变换矩阵。
参数：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动，垂直移动。

translate()：将坐标原点进行上下左右移动。
参数：添加到水平坐标x上的值，添加到垂直坐标y上的值

scale()：实现对x、y轴上的距离进行延长和缩短。
参数：缩放当前绘图的宽度(1=100%,0.5=50%…)、也是缩放的高度

drawImage()：用于将源图片的像素内容复制到画布上，还可以对图片进行缩放旋转。
参数：规定的(图片,画布,视频)、开始剪切的x坐标、y坐标、被剪切的宽度、高度、
在画布上放置图形的x坐标、y坐标、要使用图像的宽度、高度。

toDataURL()：方法将画布中内容抽取成一张图片，PNG图片形式返回。同时编码成一个字符串数据，可以在img上使用。

getImageData()：复制画布上执行矩形的像素数据。
参数：开始复制的x坐标，y坐标、复制矩形区域的宽度、高度。

putImageData()：拿到复制的像素，且将数据放回画布。
参数：要回放的数据、画布的x坐标，y坐标、水平值x，水平值y、在画布上绘制图像所使用的宽度、高度。

// 检测
isPointInPath()：指定的点是否在当前路径中，返回true表示在当前路径，反之false。

使用：
注意绘制的顺序，否则不会生效。
画布的默认坐标系统是以画布最左上角为原点。

 1 
 2 
 3 
 4 

 

 

 

绘制线段、填充多变形

var canvas = document.getElementById("my_canvas_id"); // 拿到要绘制的元素
var  context = canvas.getContext("2d"); // 绘制2d
context.beginPath();  // 开始新路径
context.moveTo(100,100); // x  y轴  定义新的子路径
context.lineTo(200,200); //  绘制一条线段 x轴200  y轴200
context.lineTo(100,200); // 再绘制一条线段
context.fill(); // 填充路径
context.closePath();   // 边框线闭合
context.stroke(); // 绘制边框线