画布

@Canvas

概述 Overview

.Canvas默认宽高为宽300px,高150px

.更改画布大小，请设置标签的 width，height 属性

.CSS样式设置画布大小，更改的是画布元素的大小，并没有更改画布的大小

.实际渲染时，会按照画布的实际大小，缩放到画布元素的大小

.后面绘制的图形会覆盖前面的图形

基本方法
类别	说明
moveTo()	移动画笔
lineTo()	画线
strokeStyle()	边线样式，同border
stroke()	描边\|渲染
fillStyle()	填充样式，同border
fill()	填充\|渲染
beginPath()	开始新路径绘制；每次开始绘制，都会自动闭合上条路径
closePath()	结束路径绘制；最后一条路径应显式闭合
strokeRect(x,y,w,h)	在(x,y)处绘制w*h的边框矩形；无需再使用stroke()函数描边
fillRect(x,y,w,h)	在(x,y)处绘制w*h的实心矩形；无需再使用fill()函数填充
arc(x,y,r,radStart,radEnd,clockwise)	绘制弧线；在原点(x,y)处，从起始弧度到结束弧度，按照半径r绘制弧线；默认顺时针方向绘制
drawImage()	画图

基本过程 Procedure

创建画布

<canvas id="canvas"></canvas>

获取画布

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d');

开始绘制

[] 绘制三角形

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f40';
ctx.fillStyle = '#ddd';
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(100, 0);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 300);
ctx.lineTo(300, 0);
ctx.fill();
ctx.closePath();
ctx.stroke();

[] 绘制圆

ctx.arc(100, 100, 50, 0, 2 * Math.PI);

绘制在第四象限内的90deg的弧

ctx.arc(100, 100, 50, 0, Math.PI / 2);

绘制在第一、第二、三象限内的弧

ctx.arc(100, 100, 50, 0, Math.PI / 2, true);

[] 验证码

drawImage()

.除了使用<img>显示图片，还可以使用canvas时绘制图片

.通常使用new Image()创建一个图像源，在其load后处理绘画业务

3个参数：指定画布位置原样输出

drawImage(image, dx, dy)

5个参数：指定画布位置指定宽高输出

drawImage(image, dx, dy, dWidth, dHeight)

9个参数：指定图片源中图像的位置、指定画布位置、指定大小输出；同背景图片的background-posting

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

[] 绘制图片

.示例图片800*

<canvas></canvas>
<script>
  const img = new Image();
  const canvas = document.querySelector('canvas');
  img.src = './imgs/avatar.jpg';
  img.onload = function () {
    const ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);
  }
</script>

[] 走路

.素材图片大小为1000*600，由上下各5个图片组成

.静态绘制|显示第一个帧

.单击开始，角色行走|逐步绘制其它帧；单击停止，角色停止行走|清除定时器

.每个图片在画布上绘制为200*300大小

.定时器应该显式置空null便于判断

.每次绘制前，先清除画布

<div class="canvas">
  <button id="play">start</button>
  <button id="stop">stop</button>
  <canvas width="200" height="300"></canvas>
</div>

let play = document.querySelector('#play');
let stop = document.querySelector('#stop');
let inter, ind = 0;
const img = new Image();
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
img.src = '../imgs/walk1.png';
img.onload = function () {
  ctx.drawImage(this, 0, 0, 200, 300, 0, 0, 200, 300);
}
play.addEventListener('click', () => {
  if (inter) {
    return;
  }
  inter = setInterval(() => {
    ctx.clearRect(0, 0, 1000, 300);
    ctx.drawImage(img, ind * 200, 0, 200, 300, 0, 0, 200, 300);
    ind++;
    ind = ind % 5;
  }, 200);
})
stop.addEventListener('click', () => {
  clearInterval(inter);
  inter = null;
})

[] 走马灯

.角色从左走到右

.每次绘制前，先清除画布，再按照一定的时间间隔绘制图片片段

setInterval(() => {
  ctx.clearRect(0, 0, 1000, 300);
  ctx.drawImage(this, ind * 200, 0, 200, 300, ind * 200, 0, 200, 300);
  ind++;
  ind = ind % 5;
}, 300);