Canvas 学习笔记---基础图形的绘制

一、Canvas的坐标系
说到坐标系,大家都不陌生,在数学中,我们学习过平面坐标系。在HTML中,也存在着坐标系。Canvas的坐标系和HTML的坐标系是类似的。有一定的相同的地方,也有不同的地方。
相同点:Canvas和HTML的坐标系统原点是都处于左上角,X轴上向右递增正数,向左递减;Y轴上向下递增为正数,向上递减。
不同点:即Canvas允许我们将原点进行平移,也即通过代码我们可以将Canvas的原点修改到任意位置去,可以不为左上角。
大致位置如下图所示:
在这里插入图片描述
二、Canvas绘制基础图形
1.绘制矩形
Canvas为我们提供了三种方法来绘制矩形:

 fillRect(x, y, width, height)   绘制一个填充的矩形
 strokeRect(x, y, width, height) 绘制一个矩形的边框
 clearRect(x, y, width, height) 清除指定矩形区域,让清除部分完全透明 

三个方法都接受了4个参数,x,y分别代表了要绘制的矩形左上角的坐标位置,width和height则分别代表了矩形的宽高尺寸。
strokeRect是用砖瓦围了一个围墙,我们能看到的是围墙。
fillRect则不不仅仅是围了一个围墙,连围墙里面用砖瓦铺平了,我们能得到一个的砖瓦
clearRect就有点类似于拆迁大队,把矩形区域内的东西都拆掉。

2.绘制圆
绘制圆只有两个方法:
arc和arcTo,但根据MDN的说明arcTo的实现不靠谱,这里就不做解释了

arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法有五个参数:x,y为绘制圆弧所在圆上的圆心坐标,radius为半径,startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。参数anticlockwise为一个布尔值,为true时,是逆时针方向,否则顺时针方向,默认为false,即顺时针。

3.绘制路径
Canvas绘制路径的原理就是:通过两个点确定一条直线,路径绘制就是通过一组又一组的两点绘制出各种复杂的图形出来。
基本步骤:

  • 首先,需要你将画笔移动到某处
  • 然后使用画图命名去画出路径
  • 之后把路径封闭。
  • 一旦路径生成,你就能通过描边或者填充路径来渲染图形

对应的Canvas的API 为以下几个API:

beginPath();
moveTo(x,y);
lineTo(x,y);
closePath();
fill();
stroke();

创建路径就意味着首先我们要告诉Canvas我们接下来要绘制路径(beginPath)了,然后我们将画笔移动到某处moveTo,这里就是两点中的第一个点,接下来我们要确定第二个点了,即lineTo,假设我们只画一个线段,那么接下来我们就要告诉Canvas要结束绘制路径(closePath)了,当到这一步的时候我们就可以选择这个图形是什么样的了,是要fill(填充)还是要stroke(描边)。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页