canvas入门

日期：2020 年 5 月 8 日

canvas 学习笔记

canvas 简介

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

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

画线

<canvas id="myCanvas"
      width="200"
      height="100"
      style="border: 1px solid #000"
 >
     您的浏览器不支持 HTML5 canvas 标签
 </canvas>
 <script>
        let c = document.getElementById('myCanvas')
        let cxt = c.getContext('2d')
        cxt.moveTo(0,0)
        cxt.lineTo(50,50)
        cxt.lineTo(70,15)
        cxt.lineTo(90,90)
        cxt.stroke()
 </script>

效果：

画线

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

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

绘制矩形

<!DOCTYPE html>
<html lang="en">
<body>
    <canvas id="myCanvas"
        width="200"
        height="100"
        style="border: 1px solid #000"
     >
      您的浏览器不支持 HTML5 canvas 标签
    </canvas>
    <script>
        let c = document.getElementById('myCanvas')
        let cxt = c.getContext('2d')
        cxt.beginPath()
        cxt.fillStyle = '#FF0000'
        cxt.fillRect(10,10,50,50)
        cxt.closePath()
        
        cxt.beginPath()
        cxt.strokeStyle = '#FF0000'
        cxt.strokeRect(70,10,100,50)
        cxt.closePath()
    </script>
</body>

效果:

画方

这里需要注意的有两点：

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

绘制圆（弧）形

<canvas id="myCanvas"
      width="200"
      height="100"
      style="border: 1px solid #000"
 >
     您的浏览器不支持 HTML5 canvas 标签
 </canvas>
 <script>
     let c = document.getElementById('myCanvas')
     let cxt = c.getContext('2d')
     cxt.beginPath()
     cxt.arc(50,50,40,0,2*Math.PI)
     cxt.stroke()
     cxt.beginPath()
     cxt.arc(150,50,40,0,1.5*Math.PI)
     cxt.stroke()
 </script>

效果：

画弧

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

arc()方法参数

颜色渐变

1、线性渐变

<canvas id="myCanvas"
      width="200"
      height="100"
      style="border: 1px solid #000"
 >
     您的浏览器不支持 HTML5 canvas 标签
 </canvas>
 <script>
    // 线性渐变
    let c = document.getElementById('myCanvas')
    let cxt = c.getContext('2d')
    
    cxt.beginPath()
    let grd1 = cxt.createLinearGradient(0,0,0,50) // 创建从上往下的线性渐变
    grd1.addColorStop(0, 'black')
    grd1.addColorStop(1, 'white')
    cxt.fillStyle = grd1
    cxt.fillRect(10,10, 150,50)
    cxt.closePath()
    
    cxt.beginPath()
    let grd2 = cxt.createLinearGradient(0,0,150,0) // 创建从左往右的线性渐变
    grd2.addColorStop(0, 'black')
    grd2.addColorStop(1, 'white')
    cxt.fillStyle = grd2
    cxt.fillRect(10,70, 150,20)
    cxt.closePath()
 </script>

效果:

线性渐变

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

2、放射性渐变

<canvas id="myCanvas"
      width="200"
      height="100"
      style="border: 1px solid #000"
 >
     您的浏览器不支持 HTML5 canvas 标签
 </canvas>
 <script>
     let c = document.getElementById('myCanvas')
     let cxt = c.getContext('2d')
     let grd = cxt.createRadialGradient(50,50,10,50,50,100)
     grd.addColorStop(0, 'green')
     grd.addColorStop(1, 'blue')
     cxt.fillStyle = grd
     cxt.fillRect(10,10, 150,80)
 </script>

效果：

放射形渐变

文字绘制

<canvas id="myCanvas1"
      width="200"
      height="100"
      style="border: 1px solid #000"
 >
     您的浏览器不支持 HTML5 canvas 标签
 </canvas>
 <canvas id="myCanvas2"
      width="200"
      height="100"
      style="border: 1px solid #000"
 >
     您的浏览器不支持 HTML5 canvas 标签
 </canvas>
 <script>
        // 实心文字
        let c1 = document.getElementById('myCanvas41)
        let cxt1 = c1.getContext('2d')
        cxt1.font = '15px Arial'
        cxt1.fillText('canvas text', 20,20)
        
        // 空心文字
        let c2 = document.getElementById('myCanvas2')
        let cxt2 = c2.getContext('2d')
        cxt2.font = '20px Arial'
        cxt2.strokeText('canvas text', 50,50)
 </script>

效果：

绘制文字

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

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

图像绘制

<image id="picture" src="via.jpg" width="140" height="90"></image>
<canvas
    id="myCanvas"
    width="200"
    height="100"
    style="border: 1px solid #000"
>
    您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
    // 绘制图片
    let c = document.getElementById('myCanvas')
    let cxt = c.getContext('2d')
    let pic = document.getElementById('picture')
    pic.onload = function() {
        cxt.drawImage(pic,10,10,140,90);
    }
</script>

效果：

画图

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

drawImage()方法参数