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

我们先看看画布的魅力：

初始画布

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

绘制步骤

1.定义一个id

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()

绘制直线

绘制矩形

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

绘制

strokeStyle

strokeRect(x,y,w,h)

填充

fillStyle

fillRect(x,y,w,h)

绘制圆形

绘制300*300画布的内切圆

beginPath()

开始绘制路径

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

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

r 代表半径

s 代表开始弧度

e 代表结束弧度

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

默认顺时针

closePath()

结束绘制路径

扩充案例

fill()

填充

绘制弧线

context.closePath();

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