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

语言: CN / TW / HK

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看

前言

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

文本

前面只讲了图案,这次来讲文字,跟之前的图案类似,也有fill填充,和stroke画笔样式,只不过这里的是fillText和strokeText。因为参数一样,所以一起讲,三个参数分别是文本内容x,y坐标。font用于设置字体大小和字体类型。 - font - 定义字体 - fillText(text,x,y) - 在 canvas 上绘制实心的文本 - strokeText(text,x,y) - 在 canvas 上绘制空心的文本

```js 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); ```

图像

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

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

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

注意的点

  • 宽高,一定要通过属性去设置,不要用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也可以制作,也就是说既可以做图表,还可以做游戏,也可以做自定义设置的图片海报等。

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