画布Canvas的使用方法
Posted 那一刻~~~掩护你
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了画布Canvas的使用方法相关的知识，希望对你有一定的参考价值。
今天来个画布的讲解，对于画布你们了解多少呢。
Canvas他是使用 javascript 来绘制图像的，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
在画布的流程中大致是这样：
1、’先获取画布canvas；
2、创建2d画布；
3、起始点
4、过渡；
5、结尾点；
来看看我画的太极吧：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas width="300px" height="300px" style="border: 1px solid"></canvas> <script> var ca=document.querySelector("canvas"); var x=ca.getContext("2d"); x.beginPath(); // 两个大圆相交 x.fillStyle="white"; x.arc(150,150,150,0,180*Math.PI/180,false); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.fillStyle="black"; x.arc(150,150,150,0,180*Math.PI/180,true); x.fill(); x.stroke(); x.closePath(); //两个小圆 x.beginPath(); x.restore(90*Math.PI/180); x.fillStyle="black"; x.arc(76,150,75,0,180*Math.PI/180); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.restore(90*Math.PI/180); x.fillStyle="white"; x.arc(76,150,20,0,360*Math.PI/180); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.fillStyle="white"; x.arc(227,150,75,0,180*Math.PI/180,true); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.fillStyle="black"; x.arc(227,150,20,0,360*Math.PI/180); x.fill(); x.stroke(); x.closePath(); </script> </body> </html>
以上是关于画布Canvas的使用方法的主要内容，如果未能解决你的问题，请参考以下文章