Canvas Api(全)

Canvas API

ctx.moveTo(100,100)

参数

1. x 横坐标
2. y 竖坐标

作用

将画笔移动到坐标中的某个点

ctx.lineTo(100,100)

参数

1. x 横坐标
2. y 竖坐标

作用

将画笔从它所在的点到另一个点用线连接

ctx.stroke()

参数

无

作用

画

ctx.strokeStyle (‘red’)

参数

1. 色值

作用

画笔颜色

ctx.beginPath()

参数

无

作用

开始使用一只新的画笔，防止之前的画笔的各种属性污染到新的图

ctx.closePath()

参数

无

作用

将画笔目前所在的点连接画笔所在的第一个点

ctx.fill ()

参数

无

作用

将画笔所圈起来的区域进行颜色的填充

ctx.rect(100,100,100,100)

参数

矩形所在的四个边的坐标

作用

用笔画一个矩形

ctx.strokeRect(200,200,100,100)

参数

矩形所在的四个边的坐标

作用

用笔画一个矩形，是独立路径

独立路径 指的是不会影响画笔在其他地方的操作，相当于 fixed，浮动起来了

ctx.fillRect(200,200,100,100)

参数

矩形所在的四个边的坐标

作用

填充一块矩形区域

ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)

参数

矩形所在的四个边的坐标

作用

清空一块矩形区域

ctx.createLinearGradient(100,100,500,400)

参数

矩形所在的四个边的坐标

作用

填充一块渐变的矩形

用法

var linearGradient = ctx.createLinearGradient(100, 100, 500, 400);
linearGradient.addColorStop(0, "pink");
//linearGradient.addColorStop(0.5,'red');
linearGradient.addColorStop(1, "blue");

ctx.arc(x,y,r,startAngle,endAngle,anticlockwise)

参数

x 圆心横坐标
y 圆心纵坐标
r 半径
startAngle 开始角度
endAngle 结束角度
anticlockwise 是否逆时针方向绘制（默认 false 表示顺时针；true 表示逆时针）

作用

画圆

用法

ctx.arc(100, 75, 50, 0, 2 * Math.PI);

Math.PI=180 度

设置文字

用法

// 字体
ctx.font = "40px Microsoft YaHei";
/*左右对齐方式 (center left right start end) 基准起始坐标*/
ctx.textAlign = "center";
/*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
ctx.textBaseline = "middle";

ctx.fillText(str,x0,y0)

参数

1. 填充的文字
2. 文字所在横坐标
3. 文字所在纵坐标

作用

填充字体

ctx.drawImage()

参数

1. 填充的文字
2. 文字所在横坐标
3. 文字所在纵坐标

作用

填充图片

用法

/*绘制图片的三种方式*/

/*3参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
//ctx.drawImage(image,100,100);

/*5个参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
/*是图片的大小  不是裁剪  是缩放*/
//ctx.drawImage(image,100,100,100,100);

/*9个参数*/
/*图片对象*/
/*图片上定位的坐标  x y */
/*在图片上截取多大的区域  w h*/
/*绘制在画布上的坐标 x y*/
/*是图片的大小  不是裁剪  是缩放*/
ctx.drawImage(image, 400, 400, 400, 400, 200, 200, 100, 100);

坐标转换

作用

转换 canvas 的坐标

用法

平移 移动画布的原点
translate(x,y) 参数表示移动目标点的坐标
缩放
scale(x,y) 参数表示宽高的缩放比例
旋转
rotate(angle) 参数表示旋转角度

var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
//ctx.translate(100,100);
//ctx.scale(0.5,1);
//ctx.rotate(Math.PI/6);
var startAngle = 0;
ctx.translate(150, 150);
setInterval(function () {
  startAngle += Math.PI / 180;
  ctx.rotate(startAngle);
  ctx.strokeRect(-50, -50, 100, 100);
}, 500);