画布用于在页面上绘制图形

1 .画布概述：

Html5画布元素和javascript一起用于在页面上绘制图形

Canvas是一个画布，上面画着路径矩形圆…

创建画布

画布id宽度高度/画布

2 .画布绘图图形：--> JavaScript绘图

Canvas本身没有绘图能力，绘图是用javascript * * * * *

1.JS获取元素

2”元素。getContext(" 2d ")HTML 5的内置对象。绘制2D图形有绘制矩形路径、圆形字符等方法。

cxt.fillStyle=' # ff0000//绘制填充颜色

cxt.fillRect(25，10，150，75)；//x，y，w，h确定形状25和10的起点坐标

注意：不支持画布

canvas id=' my canvas ' width=' 200 ' height=' 100 '

您的浏览器不支持画布

/canvas

3.画直线和矩形

直线：

cxt.moveTo(10，10)；原始起点

cxt.lineTo(150，50)；原始起点的终点是同一二维图形的下一条直线的起点

cxt . stroke()；输出

矩形：

cxt.strokeStyle=' # ff0000矩形边框颜色

cxt.strokeRect(10，10，50，50)；画直角坐标

cxt.fillStyle=' # ff0000填充颜色

cxt.fillRect(10，10，150，150)；填充位置

4画一个圈：

1 "html5度圆"

2.画一个圆

Cxt.arc (x，y，半径，起始角度，角度，其他参数(真逆时针假顺时针))

x，y起点

半径半径

起点角度起点角度

单一终点度数

画一个三角形

从BeginPath()开始绘制路径

6个清晰的画布元素：

Cxt.clearRect(x，y，宽度，高度)清除(x，y)宽度和高度范围内的画布元素

7.保存和恢复画布的状态

Cxt.save()保存的状态

Cxt.restore()还原保存的状态，包括边框和填充颜色

8.移动坐标空间：

翻译：画布点移动

翻译(150，150)

原来的0，0——“150，150”

9.图片堆叠