canvas 基本使用

前言

1. h5 的 canvas 元素使用 js 在网页上绘制图像

2. 画布是一个矩形区域，可以控制其每一个像素；它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

3. 创建 canvas 元素

   • 向 h5 页面添加 canvas 元素，规定元素的 id、宽度、高度
   • 坐标系以左上角为点（0，0），正向往右 x、往下 y

   <canvas id="myCanvas" width="200" height="100"></canvas>

4. 通过 js 来绘制

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

canvas 的基本使用

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

canvas 图形绘制

1. 矩形绘制
   • ① rect(x, y, w, h) 没有独立路径
   • ② strokeRect(x, y, w, h) 有独立路径，不影响别的绘制
   • ③ fillRect(x, y, w, h) 有独立路径，不影响别的绘制
   • ④ clearRect(x, y, w, h) 擦除矩形区域
2. 圆弧绘制
   • arc() 圆心横坐标 x，圆心纵坐标 y，半径 r，开始角度 starAngle，解决角度 endAngle
   • 是否逆时针方向绘制，默认 false 顺时针，true 逆时针
3. 绘制文本
   • ① 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 做动画

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

canvas 案例

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

1. 绘制线条

   	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();

2. 绘制图形

   	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();
       }

3. 绘制网格

       // 网格大小
       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();
       }

4. 绘制坐标系

   // 确定原点、确定距离画布旁边的距离、确定坐标轴的长度、确定箭头的大小是个等腰三角形、绘制箭头填充
   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();