H5_Study_Day1_Canvas

        今天就突然想重头系统的学习一下前端知识，当然我现在已经不是一名开发了，目前学习的话只是把它当作自己的一个兴趣爱好，如果以后有机会的话还是想继续为IT行业添砖JAVA，哈哈哈~。

 我们就来学习一下HTML5中的新特性！

• 画图的canvas元素
• 媒体回放的video和audio元素
• 新的表单控件

 主要的学习目标是画图的canvas元素。 

 使用的编辑工具Visual Studio Code 和chrome浏览器    

 

 什么是canvas？

        <canvas>标签是用于图形绘制的，可通过脚本javascript来完成，它可以用来绘制各种的盒模型，方块，以及我们常见某网站的图形验证码，都可以用canvas来绘画出来，在网络爬虫方面，使用canvas也可以有效的为爬虫增加难度，可以说是很难去监听你的接口数据，防止被不法分子或者学习者去采用。

 各种浏览器支持的版本

 这里不推荐使用ie浏览器

创建一个画布

        因为vscoad中我也不知道为什么没有canvas的代码提示，所以我就添加了下面的代码。具体有没有用的话还需要去验证，因为我自己已经手打过一遍，所以vscoad中已经自动帮我添加了提示。

/** @type {HTMLCanvasElement}*/

         下面是主要的实现代码，其实这里我还是遇到了一些问题，就是JavaScript的代码不能放到canvas的上方，这样的话我们在调试的时候会报错，主要的原因就是画布还没有生成，就调用了它，我们的程序会找不到这个画布，所以就会报错。

 

 

 具体效果就是下方所示，很简单的一个效果。 

 

Canvas坐标和路径

        Canvas的坐标就是一个二位的网格，可以使用fillRect方法使用参数（0，0，200，80）这个就是就是在画布上绘制200x80的矩形，总左上角的（0，0）开始。

下面的js代码主要的意思是：从坐标（0，0）开始，（200，100）结束。使用stroke方法来绘制线条。

<script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.moveTo(0, 0);
      ctx.lineTo(200, 100);
      ctx.stroke();
</script>

效果展示： 

 使用Canvas来绘画文本

 使用js代码中的font和fillText方法去实现

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

效果展示：

 以上是常见的绘画方法，最后在了解一下图像的知识

 

使用drawImage方法去绘画图片，具体实现代码如下，很简单。

效果展示：

 

总结

canvas我还有很多没有去深入学习，这里也是参考了菜鸟教程的网站，接下来的学习目标就是复习html、css、js的基础知识，复习一下基础，接着就进入框架的学习阶段，我打算等基础复习差不多了，正式进军vue3.0全家桶学习，偶尔更新。。。