Canvas是HTML5中新增的功能，出来好久了，一直没去学习，趁着今天有空，特地来学习了解一下。
大神请绕道，感谢感谢^_^...........
这不趁着自己对Canvas还有一点点记忆，做了个小练习：Canvas画板
还是老套路，首先了解canvas几个常用属性跟方法：
1.首先是在HTML中使用标签：
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 你的浏览器不支持Canvas画布，请升级或更换浏览器 </canvas>
2.然后我们便需要结合JavaScript在画布中绘制：
<script>
//在画布中画一条直线
var c=document.getElementById("myCanvas");//获取画布的id
var ctx=c.getContext("2d");//指定绘制2d图形
ctx.beginPath(); //开始绘画
ctx.moveTo(0,0);//绘画起点路径
ctx.lineTo(300,150);//画到指定点的路径
ctx.beginPath(); //结束绘画，此方法可有可无
ctx.stroke();//绘制定义好的路径
</script>3.将以上两点结合起来我们便可以得到以下效果：
4.给绘制好的图像填充颜色
实例：绘制一个正方形并且填充颜色
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
你的浏览器不支持Canvas画布，请升级或更换浏览器
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); //开始绘画
ctx.moveTo(20,20);//从x轴为20，y为20的点开始绘制
ctx.lineTo(20,100);//添加新点20,100绘制一条竖线
ctx.lineTo(100,100);//添加新点100,100绘制一条横线
ctx.lineTo(100,20);//添加新点100,20绘制一条竖线
ctx.lineTo(20,20);//添加新点20,20绘制一条横线
ctx.fillStyle='red';//设置填充的颜色为红色
ctx.fill();//填充
ctx.stroke()//绘制
</script>
</body>
</html>效果图：
5.区别strokeStyle
实例：绘制一个边框为蓝色的三角形，无填充
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
你的浏览器不支持Canvas画布，请升级或更换浏览器
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); //开始绘画
ctx.moveTo(20,20);//从x轴为20，y为20的点开始绘制
ctx.lineTo(20,100);//添加新点20,100绘制一条竖线
ctx.lineTo(100,100);//添加新点100,100绘制一条横线
ctx.lineTo(100,20);//添加新点100,20绘制一条竖线
ctx.strokeStyle='blue';//设置笔触的颜色为蓝色
ctx.stroke()//绘制
</script>
</body>
</html>效果图：
6.利用Canvas自带的方法绘制矩形跟圆形
JavaScript语法：
context.rect(x,y,width,height);//绘制矩形的语法
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
context.arc(x,y,r,sAngle,eAngle,counterclockwise);//绘制圆的语法
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
实例：绘制一个矩形
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);//绘制一个150*100的矩形
//绘制一个填充红色的矩形
//ctx.fillStyle="red";
//ctx.fillRect(20,20,150,100);
ctx.stroke();
</script>
</body>
</html>效果图：
实例：绘制一个圆
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>效果图：
注意：beginPath()和closePath()不一定要成对使用。beginPath()单纯的表示开始规划一段新的路径；closePath()表示结束当前路径，若当前路径没闭合则自动闭合。
另外：context.fill()方法对于没有闭合的图形，会自动将其首位相连，再填充。所以即使画的时候没有使用closePath()来闭合图形，也是可以填充的。
以上就是本文的全部内容，看了这些是不是很简单。
还没有留言，还不快点抢沙发？