canvas入门

日期：2020 年 5 月 8 日

canvas 学习笔记

canvas 简介

canvas 是一个用来绘图的 html5 标签，但是 < canvas> 标签本身并不具备绘图能力，实际的绘图需要借助 js 脚本来完成，而具体做这件事情的就是 getContext('2d') 这个对象，这个对象提供的各种属性及方法可以让我们很方便地完成线条，图形，文字，图像等的绘制

以下为使用 canvas 的几个最基本的绘图功能

画线

     您的浏览器不支持 HTML5 canvas 标签
 
 

效果：

画线

这里有几个路径相关的方法需要注意：

• moveTo() 把路径移动到画布中的指定点，不创建线条
• lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
• stroke() 绘制已定义的路径

绘制矩形

    
      您的浏览器不支持 HTML5 canvas 标签
    
    

效果:

画方

这里需要注意的有两点：

1. 填充颜色与路径颜色：
   fillStyle : 设置填充的颜色、渐变或模式
   strokeStyle : 设置笔触（路径）的颜色、渐变或模式
2. 绘制实心矩形与空心矩形：
   fillRect() : 绘制实心矩形，参数为左上角的坐标及矩形宽高
   strokeRect() : 绘制空心矩形，参数为左上角的坐标及矩形宽高

绘制圆（弧）形

     您的浏览器不支持 HTML5 canvas 标签
 
 

效果：

画弧

这里要注意绘制圆（弧）形用到的方法是 arc() 方法，该方法接受5个固定参数合一个可选参数，如下：

arc()方法参数

颜色渐变

1、线性渐变

     您的浏览器不支持 HTML5 canvas 标签
 
 

效果:

线性渐变

这里用到的方法是 createLinearGradient() , 该方法接受四个参数，前两个参数为渐变开始的点 的坐标，后两个参数为渐变结束的点的坐标，以此来确实渐变的方向

2、放射性渐变

     您的浏览器不支持 HTML5 canvas 标签
 
 

效果：

放射形渐变

文字绘制

     您的浏览器不支持 HTML5 canvas 标签
 
 
     您的浏览器不支持 HTML5 canvas 标签
 
 

效果：

绘制文字

这里要注意的是绘制文字的时候需要设置字号及字体，可以通过 font 属性设置

绘制文字有 fillText() 和 strokeText() 两个方法，他们都接受3个参数，需要绘制的文字，及文字开始绘制的位置坐标，不同的是前一个方法用来绘制实心文字，而后一个方法用来绘制空心文字

图像绘制

    您的浏览器不支持 HTML5 canvas 标签

效果：

画图

上图左侧为一个 标签，右侧为通过 绘制出来的图像，需要注意的是使用
canvas 绘制图像需要在图像加载完毕之后再进行，即上述的 onload() 事件完成后进行图像绘制，绘制图像使用的方法为 drawImage()，接受三个固定参数和6个可选参数，如下：

drawImage()方法参数