canvas 基本使用

前言

h5 的 canvas 元素使用 js 在网页上绘制图像
画布是一个矩形区域，可以控制其每一个像素；它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
创建 canvas 元素
- 向 h5 页面添加 canvas 元素，规定元素的 id、宽度、高度
- 坐标系以左上角为点（0，0），正向往右 x、往下 y
html 复制代码
```
<canvas id="myCanvas" width="200" height="100"></canvas>
```

通过 js 来绘制

javascript 复制代码

// 获取元素、获取绘制工具、设置绘图的起始位置、绘制路径（结束位置）、描边（连线）
var myCanvas = document.querySelector('#myCanvas')
var context = myCanvas.getContext('2d')
context.moveTo(100,100)
context.lineTo(200,200)
context.stroke()

canvas 的基本使用

图形绘制
- ① 路径的绘制：描边 stroke()、填充 fill()
- ② 闭合路径：手动闭合、程序闭合 closePath()
- ③ 填充规则（非零环绕）；④ 开启新的路径 beginPath()
设置样式（画笔的状态）
- ① lineWidth 线宽，默认 1px
- ② lineCap 线末端类型，默认 butt、round、square
- ③ lineJoin 相交线的拐点，默认 miter、round、bevel
- ④ strokeStyle 线的颜色；⑤ fillStryle 填充的颜色；⑥ setLineDash() 设置虚线
- ⑦ getLineDash() 获取虚线宽度集合
- ⑧ lineDashOffset 设置虚线偏移量（负值向右偏移）
参考文档：w3school、Canvas_API

canvas 图形绘制

矩形绘制
- ① rect(x, y, w, h) 没有独立路径
- ② strokeRect(x, y, w, h) 有独立路径，不影响别的绘制
- ③ fillRect(x, y, w, h) 有独立路径，不影响别的绘制
- ④ clearRect(x, y, w, h) 擦除矩形区域
圆弧绘制
- arc() 圆心横坐标 x，圆心纵坐标 y，半径 r，开始角度 starAngle，解决角度 endAngle
- 是否逆时针方向绘制，默认 false 顺时针，true 逆时针
绘制文本
- ① ctx.font = '微软雅黑' 设置字体；② strokeText()
- ③ fillText(text, x, y, maxWidth) 要绘制的文本，文本绘制的坐标（文本左下角），设置文本最大宽度（可选参数）
- ④ ctx.textAlign 文本水平对齐方式，相对绘制坐标来说的，left、center、right、默认 start、end、direction 属性
- ⑤ ctx.textBaseline 设置基线（垂直对齐方式）
  - top 文本的基线处于文本的正上方，并且有一段距离；middle 文本的基线处于文本的正中间
  - bottom 文本的基线处于文本的证下方，并且有一段距离；hanging 文本的基线处于文本的正上方，并且和文本粘合
  - alphabetic 默认值，基线处于文本的下方，并且穿过文字；ideographic、bootom 相似，但是不一样
- ⑥ measureText() 获取文本宽度 obj.width

canvas 做动画

绘制图片 drawImage(img, x, y)，图片对象 / canvas 对象 / video 对象、图片绘制的左上角
五个参数 (img, x, y, w, h) 图片对象 / canvas 对象 / video 对象、图片绘制的左上角、图片绘制尺寸设置（图片缩放不是截取）
九个参数 (img,x,y,w,h,x1,y1,w1,h1) 图片对象 / canvas 对象 / video 对象、图片中的一个矩形区域、画布中的一个矩形区域
坐标变换
- 平移--移动画布的原点，translate(x,y) 参数表示移动目标点的坐标
- 缩放，scale(x,y) 参数表示宽高的缩放比例
- 旋转，rotate(angle) 参数表示旋转角度

canvas 案例

html 复制代码

<style>
    // 不建议在样式里设置尺寸，默认300*150
    canvas { border: 1px solid #ccc }
</style>
<canvas width="600" height="400" ></canvas>

绘制线条

javascript 复制代码

	var myCanvas = document.querySelector('canvas')
    var ctx = myCanvas.getContext('2d');
    
    // 绘制直线
    ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.stroke()
    
    // 绘制平行线
    // 问题：对齐的点是线的中心位置，会把线分成两个0.5px显示的是会不饱和增加宽度；前后移动0.5px
    ctx.moveTo(100,100.5);ctx.lineTo(300,100.5)
    ctx.moveTo(100,200);ctx.lineTo(300,200)
    ctx.stroke()
    
    // 不同颜色的平行线；蓝色、红色、绿色
    ctx.beginPath();
    ctx.moveTo(100,100);ctx.lineTo(300,100);ctx.strokeStyle = 'blue';ctx.lineWidth = 10;ctx.stroke()
    ctx.moveTo(100,200);ctx.lineTo(300,200);ctx.strokeStyle = 'red';ctx.lineWidth = 20;ctx.stroke()
    ctx.moveTo(100,300);ctx.lineTo(300,300);ctx.strokeStyle = 'green';ctx.lineWidth = 30;ctx.stroke()
    
    // 绘制虚线，[5,10] 数组是用来描述你的排列方式的，如果是正的值往后偏移，如果是负的值往前偏移
    ctx.moveTo(100,100.5);ctx.lineTo(300,100.5);
    ctx.setLineDash([20]);ctx.lineDashOffset = -20;ctx.stroke();

绘制图形

javascript 复制代码

	var myCanvas = document.querySelector('canvas')
    var ctx = myCanvas.getContext('2d');
    
    // 绘制三角形，不使用ctx.lineTo(10,100)，使用关闭路径、描边填充
    ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.lineTo(200,200);ctx.closePath();
    ctx.lineWidth = 10;ctx.stroke();ctx.fill();
    
    // 绘制两个正方形，一大一小套一起（大200小100）、填充（遵循非零环绕规则）
    ctx.moveTo(100,100);ctx.lineTo(300,100);ctx.lineTo(300,300);ctx.lineTo(100,300);ctx.closePath();
    ctx.moveTo(150,150);ctx.lineTo(150,250);ctx.lineTo(250,250);ctx.lineTo(250,150);ctx.closePath();
    ctx.fillStyle = 'red';ctx.fill();		// ctx.stroke()
    
    // 绘制渐变矩形，线是由点构成的
    ctx.lineWidth = 30;
    for(var i=0; i<255; i++) {
   		 ctx.beginPath();ctx.moveTo(100+i-1,100);ctx.lineTo(100+i,100);
         ctx.strokeStyle = 'rgb('+i+',0,0)';ctx.stroke();
    }

绘制网格

javascript 复制代码

    // 网格大小
    var gridSize = 10,  canvasHeight = ctx.canvas.height, canvasWidth = ctx.canvas.width;
    // 画多少条x、y线
    var xLineTotal = Math.floor(canvasHeight / gridSize);
    for (var i = 0; i <= xLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize - 0.5 );
        ctx.lineTo(canvasWidth, i * gridSize - 0.5);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
    var yLineTotal = Math.floor(canvasWidth / gridSize);
    for (var i = 0; i <= yLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(i*gridSize - 0.5 ,0);
        ctx.lineTo(i*gridSize - 0.5 ,canvasHeight);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }

绘制坐标系

javascript 复制代码

// 确定原点、确定距离画布旁边的距离、确定坐标轴的长度、确定箭头的大小是个等腰三角形、绘制箭头填充
var space = 20, arrowSize = 10;
// 计算原点
var canvasWidth = ctx.canvas.width, canvasHeight = ctx.canvas.height;
var x0 = space, y0 = canvasHeight - space;
// 绘制x轴、箭头；y轴、箭头
ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(canvasWidth - space, y0);
ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
ctx.lineTo(canvasWidth - space, y0);ctx.fill();ctx.stroke();

ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);
ctx.lineTo(space + arrowSize / 2, space + arrowSize);
ctx.lineTo(space - arrowSize / 2, space + arrowSize);
ctx.lineTo(space, space);ctx.fill();ctx.stroke();