canvas教程(一) 简介

什么是 canvas

按例是要介绍一下 canvas 的，在没有 canvas 以前，咱们为了网页的效果，不少状况下是使用了图片来实现，不过用图片就须要加载，并且图片的体积也是一个问题，因此在 html5 的规范里新增了一个 canvas 元素（画布）

那么其实在 html5 中有两个 2d 图形技术，还有一个是叫 svg，而它们的区别就在于：

1. canvas 是由 js 动态生成的，svg 是使用 xml 静态描述的
2. 每次修改，canvas 须要重绘，svg 不须要
3. canvas 是“位图”，适用于像素处理和动态渲染，图形放大会影响质量，而 svg 是“矢量”，图形放大不会影响质量。

这两种技术都各有千秋，适用于不一样的场合，咱们能够根据开发场景来选择，这里就很少介绍了。

canvas 元素的知识

canvas 是一个行内块元素，它默认是宽度 300px 和高度 150px，能够使用 html 属性和 js 定义宽高。

⚠️ 假如是用 css 定义宽高，在使用 js 获取 canvas 的宽高依然会是其默认值

使用 canvas 绘制图形，须要三步

1. 获取 canvas 对象
2. 获取上下文环境对象 context
3. 绘制图形

var canvas = document.getElementById('canvasId');

var context = canvas.getContext('2d');

而咱们之后所学习到的 api 和属性都是 context 对象的。

那么到这里有眼力好的同窗就能看到了 getContext 方法的参数是 2d，那是否是有 3d？

其实 html5 的 canvas 暂时只提供了 2d，想在 html 使用 3d 的同窗能够学习一下 webgl，webgl 其实难度也有点大，也许能够尝试一下 threejs，由于 threejs 是基于 webgl 封装的，感兴趣的均可以去相关的官网上学习。

结束

好了，本次的教程就到这里结束了，下次将为你们带来直线相关的绘制