前端随笔-生活工作点滴

Canvas的简单介绍

2019-07-11  本文已影响19人  前白

1:基本概念

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

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

2:浏览器兼容

browserCanvas.png

3:<canvas>是一个元素

canvas有两个属性,一个是宽度(width),一个是高度(height)。宽度和高度可以使用内联的属性,如下所示:

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

4:坐标系统

axios.png

5:准备画布,Rending Context(渲染上下文 - 画笔)

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

6:绘制画布

原生绘制API

原生绘图API有三个:

  ctx.fillRect(0, 0, 50, 50);
  ctx.strokeRect(50, 50, 100, 100);
  ctx.clearRect(10, 10, 30, 30);</pre>

绘制线段 - 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

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

贝塞尔曲线 - Path

ctx.beginPath();
ctx.bezierCurveTo(0, 123, 100, -9, 100, 100);
ctx.stroke();
上一篇下一篇

猜你喜欢

热点阅读