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(); // 绘制边框线

你可能感兴趣的:(canvas)