canvas基础

今天我们简单的来认识学习一下canvas的基础概念和使用方法。

1. 认识canvas

1.1 什么是canvas

在网页开发中，canvas是html5中的一个元素，用于通过JavaScript绘制图形。它可以用来制作简单的图表、动画和游戏等。

1.2. 使用场景

1. 游戏开发：可以简单实现2d网页游戏，通过绘制和更新动画帧。
2. 数据可视化：使用canvas可以实现绘制图表和数据图形，比如折线图、柱状图。不过不建议这样做，因为有专门的可视化插件 echarts、hightCharts等。
3. 图片编辑器：canvas可以加载图片，对图片裁剪、旋转、添加滤镜、保存图片等功能。
4. 动画制作：canvas适合制作复杂的动画效果，例如粒子动画，过度效果，光影效果等。
5. 绘画应用 ：在线绘画工具和白板应用常使用Canvas，让用户可以直接在网页上进行创作。
6. 地图和地理应用 ：结合地理数据，Canvas可以用来绘制互动地图或坐标绘图，广泛用于地理信息系统（GIS）。
7. 实时视频处理 ：Canvas还可以用来处理视频帧，比如添加滤镜或叠加效果，为视频应用增添功能。

示例：

1.3 canvas元素

<canvas id="myCanvas" width="500" height="500"></canvas>

canvas有两个属性width、height, 不设置默认 width: 300px height：150px

1.4 兼容性

<canvas>
    您的浏览器不支持canvas
    <!-- or -->
    <img src="canvas.png" alt=""> 
</canvas>

1.5 判断浏览器是否支持

let canvas = document.getElementById('myCanvas');
//判