canvas
设置canvas标签 添加宽高 默认单位为px
getContext()
设置上下文的类型
var ctx = canvas.getContext('2d');
ctx可以看做是一个画笔
fillStyle
设置填充的样式
ctx.fillStyle = 'orange';
fillRect
ctx.fillRect(x, y, width, height); 有四个参数 设置x,y方向坐标与宽高值
ctx.fillRect(50, 50, 100, 100);
clearRect
清除中间的区域 四个参数 设置x,y方向坐标与宽高值
ctx.clearRect(75, 75, 50, 50);
strokeRect
带轮廓的矩形 四个参数 设置x,y方向坐标与宽高值
ctx.strokeStyle(50, 50, 100, 100);
strokeStyle
设置轮廓矩形的样式
ctx.strokeStyle = 'orange';
创建移动路径
1.创建一个路径beginPath 2.使用画图命令画出路径 3.一旦路径被创建出来的化 就可以通过描边或填充路径区域来渲染图形
直线
beginPath
创建一个路径
ctx.beginPah()
moveTo
起始位置 参数是坐标
stx.moveTo(50, 50)
lineTo
表示直线到哪个位置 参数是坐标
ctx.lineTo(100, 100)
stroke
路径显示
ctx.stroke()
lineWidth
设置线宽
ctx.lineWidth = 10
closePath
闭合路径
绘制三角形
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = 'orange';
ctx.moveTo(50, 50);
ctx.lineWidth = 10;
ctx.lineTo(150, 50);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
arc
画圆形 arc(x,y, startAngle, endAngle, anticlockwise)
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 50, 0, 2 * Math.PI);
ctx.stroke();
最后一个参数false为顺时针画 true为逆时针
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 50, 0, (Math.PI / 180) * 90);
ctx.stroke();
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 50, 0, (Math.PI / 180) * 90, true);
ctx.stroke();
arcTo
画圆弧路径 arcTo(x1, y1, x2, y2 ,radius) 前四个为控制点的坐标
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150, 100, 50, 20, 30);
ctx.lineTo(50, 20);
ctx.stroke();
//基础点
ctx.fillStyle = 'blue';
ctx.fillRect(150, 20, 10, 10);
ctx.fillStyle = 'red';
//控制点k1
ctx.fillRect(150, 100, 10, 10);
//控制点k2
ctx.fillRect(50, 20, 10, 10);
quadraticCurveTo
二次贝塞尔曲线 quadraticCurveTo(ctx, cty, x, y) 控制点与终点
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();
ctx.fillStyle = 'blue';
// 起点
ctx.fillRect(50, 20, 10, 10);
// 终点
ctx.fillRect(50, 100, 10, 10);
// 控制点
ctx.fillStyle = 'red';
ctx.fillRect(230, 30, 10, 10);
bazierCurveTo
三次贝塞尔曲线 bazierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) 两个控制点一个终点
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 50, 150, 60, 50, 100);
ctx.stroke();
translate
坐标轴变换
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.translate(50, 50);
ctx.fillRect(0, 0, 10, 10);
restore
恢复到最近一次保存的情况
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.save(); //保存之前的状态
ctx.translate(50, 50);
ctx.fillRect(0, 0, 10, 10);
ctx.restore(); //还原上次保存的状态
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 10, 10);
scale
缩放因子 x轴整体缩放
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.scale(2, 1);
ctx.fillRect(50, 0, 50, 50);
totate
旋转
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.fillRect(20, 20, 50, 50);
ctx.rotate((Math.PI / 180) * 10);
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 50, 50);
transform
水平缩放 垂直倾斜 水平倾斜 垂直缩放 水平移动 垂直移动
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 50, 50);
setTransform
忽略transalte的变换
var canvas = document.getElementById('canvas1');
// 一个参数 设置上下文的类型
var ctx = canvas.getContext('2d');
ctx.translate(50, 50);
ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 50, 50);
相关链接
发表评论