06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

我们先看看画布的魅力：

初始画布

canvas默认是宽300px，高150px;

绘制步骤

1.定义一个id

<canvas id="canvasOne" width="300" height="300"></canvas>

2.获取canvas对象

var canvasObj = document.getElementById('canvasOne');

3.通过getContext获取上下文

var context = canvasObj.getContext("2d");

目前支持2d绘图

4.通过javascript进行绘制

context.fillStyle = "red";

设置样式为红色

context.fillRect(125, 125, 50, 50);

，y坐标为125的地方绘制一个长为50宽为50的正方形

绘制案例

常见几何

绘制直线

绘制300*300画布的对角线

beginPath()

开始绘制

moveTo(x,y)

直线起点

lineTo(x,y)

直线终点

stroke()

绘制直线

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

//context.strokeStyle = "#ff6a00";

context.beginPath();

context.moveTo(0, 0);

context.lineTo(300, 300);

context.stroke();

context.moveTo(0, 300);

context.lineTo(300, 0);

context.stroke();

</script>

绘制矩形

在画布中间绘制一个100*的矩形

绘制

strokeStyle

strokeRect(x,y,w,h)

填充

fillStyle

fillRect(x,y,w,h)

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

context.strokeStyle = 'rgb(100%,0%,100%)';

context.strokeRect(100, 125, 100, 50);

</script>

绘制圆形

绘制300*300画布的内切圆

beginPath()

开始绘制路径

arc(x, y, r, s, e, b)

x，y 坐标这次是代表圆心

r 代表半径

s 代表开始弧度

e 代表结束弧度

b 代表是否逆时针方向画图

默认顺时针

closePath()

结束绘制路径

扩充案例

fill()

填充

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

context.fillStyle = 'rgb(0,50,0)';

context.beginPath();//开始绘制路径

context.arc(150, 150, 150, 0, Math.PI * 2,true);//注意：x，y 坐标这次是代表圆心

context.closePath();//结束绘制路径

context.fill();//填充

</script>

绘制弧线

context.closePath();

路径不闭合的时候会自动画一条直线（代码看注释）

<canvas id="canvasOne" width="300" height="300"></canvas>

<canvas id="canvasTwo" width="300" height="300"></canvas>