html5中的canvas还记得吗(4)，前端基础

前言

前面的内容把canvas的基础讲完了，比如画矩形啊，圆点坐标啊，画圆啊，填充颜色啥的。之前也说过canvas的方法有很多，所以这次继续讲剩下常用的方法，那么就让我们开始吧

文本

前面只讲了图案，这次来讲文字，跟之前的图案类似，也有fill填充，和stroke画笔样式，只不过这里的是fillText和strokeText。因为参数一样，所以一起讲，三个参数分别是文本内容x，y坐标。font用于设置字体大小和字体类型。

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d"); 
ctx.font="30px Arial"; 
ctx.fillText("Hello World",50,50);

// 两个看文字样式可以看效果，好区分。
//ctx.strokeText("Hello World",50,50); 
1
2
3
4
5
6
7

图像

canvas也可以展示图片，而且canvas也可以转换为图片，这个用到的地方还是很多的，比如有二维码的宣传海报定制。

使用drawImage方法用于绘制图片，参数比较简单就三个，分别是图片元素，x,y的坐标。

• drawImage(image,x,y)

var myCanvas=document.getElementById("myCanvas"); 
var ctx=myCanvas.getContext("2d"); 
// 通过图片id获取图片元素
var img=document.getElementById("img"); 
ctx.drawImage(img,0,0); 
1
2
3
4
5

注意的点

• 宽高，一定要通过属性去设置，不要用style样式设置。会变形
• 获取不到画的元素的，比如你画了个矩形，通过dom操作是找不到的，只能通过监听鼠标的位置来判断是否在矩形里面。跟svg不一样。

和svg的区别

svg也是html5的代表特性，也是可以画图，功能基本跟canvas一样，所以也简单做下对比。

• Canvas 通过是getContext获取画笔刷来绘制图形的；SVG 主要是用标签来绘制不规则矢量图的，也就是在dom操作中是可以获取到的具体的元素的。
• Canvas 画的是位图；SVG 画的是矢量图，矢量图不会失真。
• Canvas 性能更好一点，但写起来更复杂，需要通过坐标来判断画的元素的位置，比如碰撞啥的就比较麻烦；SVG 节点过多时渲染慢，因为也算是在更新dom，所以节点多就不如canvas了，
• Canvas 不支持事件，但是可以用库实现，比如echarts；SVG 支持分层和事件，因为它就是标签，所以都支持。

总结

总以为canvas讲的差不多了，可总是又能遇到常用的重点知识点，也从侧面反应出来canvas功能真的多，用处真的大，使用场景也很多，所以canvas是必须要掌握的，要牢牢掌握，以后用到的地方真的很多，像百度的echarts图表库就是利用canvas制作的，还有微信之前的飞机大战小游戏canvas也可以制作，也就是说既可以做图表，还可以做游戏，也可以做自定义设置的图片海报等。

好啦，本节内容就总结到这里。我的文章都是学习过程中的总结，希望能够和小伙伴们共同进步共同学习，如果发现错误，也欢迎留言指出，我及时更正。