都0202年了，这个技能竟然还有好多人不会！
黑马程序员视频库
播妞QQ号：
3077485083
传智播客旗下互联网资讯、学习资源免费分享平台
最近几年，web前端依旧是热门行业，几乎所有行业都缺能独当一面的前端人才，可你却告诉我，你连简单的画布都不会。
are you kidding me？？？
画步是基本的基本，花5分钟跟着播妞学起来，说不会的出来挨打。卑微播妞上线教学，你跟着流程一步一步的敲一下代码，保你能学会~（一定要学会，不然播妞的脸会很疼）。
web前端画布，走起，跟我左边绘个圆形，右边再敲行代码，哟~
播妞疯癫和正文的分割线……
画布（canvas）是HTML5中新增加的一个非常重要的元素，使用它的API，我们可以通过绘制的方式实现图形、线条和文字的显示。
画布目标
使用画布元素，快速绘制一个中小学教学使用的工具，效果如下：
画布步骤
要使用画布实现上述的图形效果，需要掌握画布的下列API的使用方法：
步骤1：直接绘制方法
步骤2：圆形绘制方法
步骤3：文字绘制方法
同时，还要掌握在图形绘制时图形和文字的颜色配制、线条闭合路径设置和图形的填充及描绘的过程。
画布过程
过程1：在页面中添加一个指定宽高和边框的画布元素，并通过id号获取到它的上下文环境对象，保存在变量cxt中，用于后续代码的使用，代码如下：
由于canvas是HTML5中新增元素，因此，需要考虑到它对浏览器的兼容性，如果不兼容该元素时，元素中的文字将显示在页面中。
下列代码用于获取元素的上下文环境对象：
在上述代码中，先通过id的方式获取到元素对象，并调用它的getContext方法，然后以2d的形式来绘制画布中的图形效果。
过程2：线条的绘制
使用上下文环境对象中的moveTo(x,y)方法，设置起始点的定位。
定好起始点后，再使用lineTo(x,y)方法绘制到达的终站位置。
lineTo(x,y)方法可以使用多次，用于绘制多条线条的图形。
为设置绘制线条的粗细，可以调用lineWidth属性，它的值的单位是像素，另外通过strokeStyle属性设置线条的颜色，为了将绘制过程中的一些配置属性保存在一定范围中，可以通过beginPath和closePath进行路径包裹，当所有的绘制配置项完成后，就可以调用stroke()方法，按指定的线条进行绘制了。
过程3：圆形的绘制
与线条绘制不同，圆形的绘制更加简单，它的API方法代码如下:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
各参数的功能如下表所示:
在上述代码中，以闭合的路径方式，先配置圆线条的宽度和颜色，再调用arc方法绘制一个指定圆点和半径的图形，最后调用stroke()，按设定的路径进行绘制.
过程4：文字的绘制
画布中，文字的绘制更加简单，只要确定文字内容、坐标值就可以绘制了。
context.fillText(text,x,y,maxWidth);
各参数的功能如下表所示：
在上述代码中，以闭合路径的方式绘制文字，先设定文字的大小与字体，再配置字体的颜色值，完成配置后，最后调用fillText()方法实现文字在指定坐标的绘制。
画布应用总结
通过本示例的介绍，初步掌握画布元素的基础使用和以下画布API的调用：
如何绘制一条独立或闭合的线条；
绘制一个指定圆点和半径的圆形；
在画布中以绘制的方式添加文字；
画布元素的基础功能相对简单，但在使用画布元素开发大型项目时，这些基础的知识点则是开发过程中的核心内容，反复练习画布元素的基础API是熟练掌握它使用的有效方法。
跟着播妞一起，你学会了画布了吗？没学会的再看一下过程，看看自己哪里出了问题。实在不想倒回去学的，那也没事，播妞这还给大家准备了一些web前端资料，包括3个web前端****和2个web前端工具，大家可以领取了之后慢慢学。
web前端****
1.Web Components零基础实战教学，进阶精英神助攻
2.前端技术入门神器realword
3.2小时轻松实现人脸识别的小程序
web前端工具
1.web前端开发工具Atom中文版
2.前端web开发工具Dreamweaver CS6
关注“黑马程序员视频库”
后台回复“044”
即可免费领取上述全部资料
↓↓↓
都扫码学起来
推荐阅读：
我就知道你“在看”