Canvas API
ctx.moveTo(100,100)
参数
- x 横坐标
- y 竖坐标
作用
将画笔移动到坐标中的某个点
ctx.lineTo(100,100)
参数
- x 横坐标
- y 竖坐标
作用
将画笔从它所在的点到另一个点用线连接
ctx.stroke()
参数
作用
画
ctx.strokeStyle ('red')
参数
- 色值
作用
画笔颜色
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)
参数
- 填充的文字
- 文字所在横坐标
- 文字所在纵坐标
作用
填充字体
ctx.drawImage()
参数
- 填充的文字
- 文字所在横坐标
- 文字所在纵坐标
作用
填充图片
用法
/*绘制图片的三种方式*/
/*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);
