前端提高篇(六十六)：HTML进阶7：canvas画布基本知识（一）(1)

3.如果一个动画比较复杂，首先应该考虑用canvas，用原先的js来绘制，浏览器需要对大量的dom元素进行重排、重绘、计算、渲染操作，而用canvas来做，就只要对这一个元素重排、重绘、计算、渲染，性能好很多

4.但使用canvas，需要借助js来控制，不如直接使用js操作dom来得方便

5.如果动画简单，可直接用js控制dom，如果复杂，还是用canvas好

canvas应用场景

1.游戏场景

2.大量数据图表（几百万个tr / td）

3.动画

demo网站（codepen.io）

在这个网站中有很多的demo，css，html5等等，可以搜索’canvas’，就可以看到很多用canvas制作的动画，点进去有动画制作的html、css、js源码，有的很酷炫的效果需要使用很多复杂的数学公式，如果数学基础很好的同学

canvas发展简史及支持情况

1.canvas标记由Apple在Safari 1.3 Web浏览器中引入

2.目前主流浏览器都支持，ie9之前的不支持

3.html5

canvas使用：

1.width、height属性

效果：

可以看到此时的宽高是402px

在css中修改canvas画布的宽高为200px、200px

canvas {

border: 1px solid #000;

width: 200px;

height: 200px;

}

效果：此时的宽高是202px

其实这个width、height，和我们之前在div里设置的css样式不一样，这里宽高的变化，不是css样式覆盖；我们来看看，两种width在js中的调用方式

var myCanvas = document.getElementById(‘myCanvas’);

console.log(myCanvas.id);

效果：

可以看到，用对象.属性的方法可以查看属性值，

我们也将这个方法用在获取canvas的width属性上：

var myCanvas = document.getElementById(‘myCanvas’);

console.log(myCanvas.width);

效果：查出canvas的width400，不是css里设置的200

再看在css中设置的width

var myCanvas = document.getElementById(‘myCanvas’);

console.log(myCanvas.offsetWidth);

效果：

需要用offsetWidth来获取

说明这俩不是一个东西

其实在canvas标签里设置的width并不是具体的像素值，而是一个相对值，

就好像，你拿了一张纸作画，所有的线条物体都不用常规的长度计量单位去度量（如厘米、米），而是以纸划分的每块的大小去度量

拿了张100cm * 100cm的纸，假设纸是1000*1000的，你要画10cm的线，相对这张纸的度量规则而言，就是长为100的线；你要画1mm的线，就是画这张纸长度的1/1000的线；以这张纸的度量单位为准

在这里，canvas的width属性是400，实际宽度为202px，代表着，canvas画图时的1单位，是1/200px

用这样的方式画图，画的能更准确些，因为计算单位小了，画出来的也就细致了

但myCanvas是原生dom对象，不能使用canvas的API，需要将canvas元素转成context对象才能使用

将canvas元素转成context对象：

var myCtx = myCanvas.getContext(‘2d’);

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

官网链接

注意文件可能有多个canvas，要看好要在哪个canvas里绘制

绘制图形：

画直线：

myCtx.moveTo(100, 100);

myCtx.lineTo(200,100);

myCtx.stroke();

从(100,100)画到(200,100)处，并描边渲染

效果：

画矩形：

myCtx.rect(100,100,100,100);

myCtx.stroke();

填充渲染：

myCtx.rect(100,100,100,100);

myCtx.fill();

设定线宽：注意此处没有px单位，画图大小由width属性为基准，实际大小以css样式宽高为准，如果不设css样式宽高，默认将width/height属性加上px为单位展示，即默认1单位=1px，400单位为400px

myCtx.lineWidth = 20;

设置线的颜色：

myCtx.lineWidth = 20;

myCtx.strokeStyle = ‘red’;

myCtx.rect(100,100,100,100);

myCtx.stroke();

设置填充的颜色：

myCtx.lineWidth = 20;

myCtx.strokeStyle = ‘red’;

myCtx.rect(100,100,100,100);

myCtx.stroke();

myCtx.fillStyle = ‘blue’;

myCtx.fill();

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】