Canvas-的简单介绍

jiezi

5 年前

Canvas 是 HTML5 的一个新特性，canvas 又叫做画板。顾名思义，我们可以在 canvas 上绘制我们需要的图形。最开始，canvas 它是由苹果公司提出的，当时不叫 canvas，叫 widget，因为 HTML 并不存在一套二维的绘图 API。Canvas 本身是一个 HTML 元素，需要 HTML 元素的配合高度和宽度属性而定义出的一块可绘制区域，定义区域之后使用 JavaScript 的脚本绘制图像的 HTML 元素。

它可以基本的绘制图形，进一步的制作照片，绘制动画，更进一步可以处理和渲染视频。（应用场景）

canvas 有两个属性，一个是宽度（width），一个是高度（height）。宽度和高度可以使用内联的属性，如下所示：

<canvas width="300px" height="150px" id="canvas">
    您的浏览器不支持 Canvas
    <img src="./backup.jpg" alt=""> 
</canvas>

const canvas = document.getElementById('canvas');
/* 获得 2d 上下文对象 */
const ctx = canvas.getContext('2d');

原生绘制 API

原生绘图 API 有三个：

fillRect(x, y, width, height) 填充矩形
strokeRect(x, y, width, height) 矩形边框

clearRect(x, y, widh, height) 清空

  ctx.fillRect(0, 0, 50, 50);
  ctx.strokeRect(50, 50, 100, 100);
  ctx.clearRect(10, 10, 30, 30);

绘制线段 – Path

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.closePath();

ctx.stroke();

绘制三角形 – Path

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fill();

绘制圆 / 圆弧 - Path

arc(x, y, radius, startAngle, endAngle, anticlockwise)

  ctx.beginPath();
  ctx.moveTo(0, 0);
  
  ctx.arc(150, 75, 50, 0, Math.PI / 2, false);
  
  ctx.stroke();

arcTo(x1, y1, x2, y2, radius)

  ctx.beginPath();
  ctx.moveTo(0, 0);
  
  ctx.arcTo(100, 100, 400, 100, 400);
  
  ctx.stroke();

贝塞尔曲线 – Path

cubic-bezier(n1,n2,n3,n4)
p0(0,0)
p1(1,1)
p2(n1,n2)
p3(n3,n4)

ctx.beginPath();
ctx.bezierCurveTo(0, 123, 100, -9, 100, 100);
ctx.stroke();

Canvas-的简单介绍

1：基本概念

2：浏览器兼容

3：<canvas> 是一个元素

4：坐标系统

5：准备画布，Rending Context(渲染上下文 – 画笔)

6：绘制画布