五分钟学会 Canvas 基础(二)

2,052 阅读8分钟

相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑。

就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法。为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形。

那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧。

------------------我是华丽的分割线----------------------

下一篇文章预告, canvas 的各种图像特效。

另外,接下来一段时间,小编要享受一下假期,暂时不会给各位读者老爷更新啦,希望各位老爷耐心等待。

1.使用路径

在 Canvas 上使用路径,可按照下面的步骤进行。

  1. 调用 CanvasRenderingContext2D 对象的 beginPath()方法开始定义路径。
  2. 调用CanvasRenderingContext2D 的各种方法添加子路径。
  3. 调用CanvasRenderingContext2D 的 closePath 方法关闭路径。
  4. 调用CanvasRenderingContext2D 的fill()或 stroke()方法来填充路径或者绘制路径边框。

那我们明确了该如何去进行应该怎么去使用路径,那么我们接下来就来介绍一下 canvas 中添加子路径的方法。

- -
arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise) 向 canvas 的当前路径上添加一段弧。绘制以 x , y 为圆心,radius 为半径,从 startAngle 角度开始,到 endAngle 角度结束的圆弧。startAngle 和 endAngle 以角度为单位。
arcTo(float x1,float x2,float y1,float y2,float radius) 向 canvas 的当前路径上添加一段弧。与上一个方法不同的地方只是定义弧的方式不同。
bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y) 在当前路径上添加一段贝塞尔曲线
quadraticCurveTo(float cpX, float cpY,float x,float y) 向 canvas 当前路径添加一段二次贝塞尔曲线
rect(float x, float y,float width, float height) 向 canvas 的当前路径上添加一个矩形

方法就这些,但是参数就显得非常多了,咱们来一条条的来看看这些方法的具体使用吧。

1.1 绘制圆

首先我们来学习下如何绘制圆,首先明确,我们应该去使用 arc ( ) 方法,那么我们该如何去使用这个方法呢?

咱们,放“码”过来。




    
    Document


    

绘制圆形

当前浏览器不支持 canvas

最后实现效果如下:


Paste_Image.png

不知道小伙伴们是否看懂了上面的程序呢?

如果没看懂也无所谓,咱们就来一起说一说上面内容中的难点。

首先说一下,Math.PI 实际上指代的就是 π,换而言之也就是 180°,那么我们上面使用的角度是 Math.PI * 2,也就是绘制了一个圆形。

之后再说一下 arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise)这个方法。

里面一共有 6 个参数,这六个参数实际上对应的是:

- -
float x 指定圆弧的圆心的 X 坐标
float y 指定圆弧的圆心的 Y 坐标
float radius 指定圆弧的半径
float startAngle 设置圆弧的开始角度
float endAngle 设置圆弧的结束角度
boolean counterclockwise 设置是否顺时针旋转

这样不知道大家对我们绘制圆是否清楚明白了呢?

如果有任何疑问请及时留言回复呦。

1.2 绘制圆角矩形

我们之前已经学习过绘制圆形,也学习过绘制矩形,甚至我们也可以通过 lineJoin 去对我们的元素的圆角去进行修改。

但是,固定的东西我们不需要,我们真正需要的是可以自定义,可以根据我们想要的效果能够随意订制的内容。

为了做到这个目的,我们还可以去使用 arcTo 来去绘制一段圆弧。




    
    Document


    

绘制圆形

当前浏览器不支持 canvas

注意,我在这里分别绘制了四条线和四个弧度角,并且让他们首尾相连,以此来达到绘制矩形框的作用。

其次就是专门去封装了一个函数,用于绘制圆角矩形,回头有需要的小伙伴可以直接自行粘贴呦。


Paste_Image.png

1.3 绘制多角形

不知道大家对之前绘制三角形是否还记得?

我们在绘制三角形的时候,主要是去使用 lineTo 和 moveTo 这两个方法,可是我们在生活中遇到的图形远远不止这么几种图形。

那么我们今天就来学习一下如何去绘制多角形。




    
    Document


    

绘制多角形

当前浏览器不支持 canvas

可以看到我们又去封装了一个方法,专门用于绘制多角星,当然我们也可以在这个基础之上去继续拓展,这些就需要看小伙伴们的发挥啦。


Paste_Image.png

1.4 绘制曲线

还记得我们在一开始的时候我们学习了五个方法,除了现在已经学习的绘制圆和绘制圆角矩形,是不是还有一些奇奇怪怪的方法?

那么我们现在就开始来学习这些方法。

首先先来学习一下,添加贝塞尔曲线。

- -
bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y) 在当前路径上添加一段贝塞尔曲线
quadraticCurveTo(float cpX, float cpY,float x,float y) 向 canvas 当前路径添加一段二次贝塞尔曲线

首先来看看第一个方法,第一个方法中实际上有四个点需要注意。


Paste_Image.png

他们分别是

  • 左下角的开始点
  • 粉红色的第一个控制点(锚点)
  • 藏青色的第二个控制点(锚点)
  • 右上角的结束点

而方法中 cpX1 和 cpY1 则是控制第一个控制点的坐标,

后面的 cpX2 和 cpY2 则是控制第二个控制点的坐标。

而二次贝塞尔曲线又是怎么回事呢?


Paste_Image.png

和正常贝塞尔不同,二次曲线只需要三个点:

方法中的 cpX 和 cpY 则是去设置控制点的坐标。

那么我们来一起试一试,该如何去绘制一个个花朵。




    
    Document


    

绘制花朵

当前浏览器不支持 canvas

Paste_Image.png

1.5 绘制位图

一直到现在我们讲了如何去绘制线,三角形,多角星,矩形,圆,花朵,圆角矩形等各种图形。

但是除了这些基础图形之外,我们还可以去绘制“位图”,让一张图片绘制在我们的画布之上。

那我们怎么来做呢?

我们既然想将我们的图片载入到我们的画布中,怎么做呢?我们先来差混构建一个 Image 对象。

var image = new Image();
image.src = "lipeng.png";

需要注意两点,

  • 我们的程序只是创建,加载图片,所以调用 image 时无需传入宽度和高度,这样创建的 image 将会与 src 属性指定的图片保持相同的宽度和高度。
  • src 加载图片是进行异步加载,如果图片数据太大,或者直接来自于网络,当我们网速较慢的时候,会发现我们的图片绘制会非常慢,导致影响用户使用。我们可以使用 onload 去保证我们一定是在图片加载完成后再绘制。
var image = new Image();
image.src = "lipeng.png";
image.onload =  function(){
  //绘制图片
}

学习了如何去加载图片,我们就可以向我们的画布中添加图片了么?

没有方法你怎么去添加图片呀,魂淡。

我们还要学习添加图片的方法,这里跟大家说三种方法。

- -
drawImage(Image image, float x, float y) 把 image 绘制在 x, y 处。该方法不会对图片做任何缩放处理,绘制处理的图片保持原来的大小
drawImage(Image image, float x, float y, float width, float height) 把 image 绘制在 x, y 处。该方法会对图片进行缩放,绘制出来的宽度为 width,高度为 height。
drawImage(Image image, integer sx, integer sy, integer sw, integer sh, float dx, float dy,float dw, float dh) 该方法将会从 image 上“挖出”一块绘制到画布上。其中 sx, sy 两个参数控制从原图片上的哪一个位置开始挖去, sw, sh 两个参数控制从原图片挖球的宽度和高度;dx, dy 两个参数控制把挖取的图片绘制到画布上的哪个位置,而 dw, dh 则控制对绘制图片进行缩放,绘制出来的宽度是 dw, 高度 dh

我们知道了方法,那就来一起学习下,该如何用代码来实现吧。




    
    Document


    

绘制位图

当前浏览器不支持 canvas

结果如下:


Paste_Image.png

怎么样,是不是觉得瞬间高大上了呢?赶快学起来啦。