概述
图形的基本绘制
canvas中除了矩形 以外 其他所有的基本图形 都是由路径构成的 canvas提供了三种操纵路径的方法。
线(canvas中的路径)
- beginPath 开启一条路径
- moveTo 设置起点
- lineTo 执行到指定点
- stroke 添加颜色
- closePath方法创建从当前点到开始点的路径。(关闭一条路径 可以理解为抬笔动作)
let graphDom = document.getElementById('graph');
let graph = graphDom.getContext('2d');
graph.beginPath()
graph.moveTo(0,0)
graph.lineTo(100,100)
graph.strokeStyle = '#f40'
graph.stroke()
graph.beginPath();
graph.lineWidth="5";
graph.strokeStyle="purple"; // Purple path
graph.moveTo(0,30);
graph.lineTo(150,130);
graph.stroke();
beginPath() 方法开始一条路径,或重置当前的路径。
strokeStyle()属性设置或返回用于笔触的颜色、渐变或模式。也就是我们常说的描边。
lineWidth 属性设置或返回当前线条的宽度,以像素计。
strokeStyle 和 lineWidth 属性是公共的会影响全局的设置。因为canvas 是基于状态在画值。
closePath() 关闭路径 不是 结束路径 只是把起点和终点连接起来闭合图形 只有连接起来才能进行填充。
面(矩形、圆、圆弧)
矩形
在canvas绘制矩形除了通过点和线连接这种方式外 canvas还为我们提供了一下快捷绘制矩形点方法。下面代码中fillRect方法通过填充绘制了一个矩形 rect() 可以直接绘制一个矩形。
let graphDom = document.getElementById('graph');
let graph = graphDom.getContext('2d');
// 通过路径绘制矩形 也可以绘制任意多边形
graph.beginPath();
graph.moveTo(200,80);
graph.lineTo(200,160);
graph.lineTo(130,160);
graph.lineTo(130,80);
graph.closePath();
graph.strokeStyle = '#000';
graph.stroke();
// 填充矩形
graph.fillRect(20,20,150,100); //x, y, 宽, 高。 默认的填充颜色是黑色。
// rect绘制
graph.rect(20,20,150,100);
graph.stroke();
// graph.strokeRect(20,20,100,50)
// 补充clearRect方法清空给定矩形内的指定像素
// graph.clearRect(20,20,100,50);
通过路径绘制图形时只有closePath方法才是正真的闭合了图形lineTo回到起点并不会闭合图形只是视觉上闭合了closePath方法必须调用
fillRect(x,y,width,height)方法绘制"已填充"的矩形。默认的填充颜色是黑色。
rect(x,y,width,height) 方法会创建一个矩形。
clearRect(x,y,width,height) 方法清空给定矩形内的指定像素。
strokeRect((x,y,width,height) 绘制一个矩形 是stroke和rect方法的合并
参数x和y是绘制图形的起点坐标 width,height分别表示宽和高
圆、圆弧
let gardenDom = document.getElementById('garden');
let garden = gardenDom.getContext('2d');
garden.beginPath();
garden.arc(100,75,50,0,2*Math.PI);
garden.stroke();
garden.beginPath();
garden.moveTo(20,20); // 创建开始点
garden.lineTo(100,20);
garden.arcTo(150,20,150,70,30)
garden.lineTo(150,120);
garden.stroke();
garden.closePath()
arc(x,y,r,sAngle,eAngle,counterclockwise) 方法创建弧/曲线(用于创建圆或部分圆)
-
x 圆的中心的 x 坐标。y 圆的中心的 y 坐标
-
r 圆的半径
-
sAngle 起始角,以弧度计
-
eAngle 结束角,以弧度计。
-
counterclockwise 可选。规定应该逆时针还是顺时针绘图。
arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两个切线之间的弧/曲线。
x1和y1 第一个控制点坐标 x2,y2第二个控制点坐标 r 半径
最后
以上就是诚心大碗为你收集整理的canvas 图形的基本绘制的全部内容,希望文章能够帮你解决canvas 图形的基本绘制所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复