canvas 图形的基本绘制

图形的基本绘制

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 半径

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值