JavaScript中html画布的使用与页面存储技术

JavaScript中html画布的使用与页面存储技术

---

---

一、JavaScript使用html中的画布

1、画布：页面中用于绘制图形的特殊区域
2、绘制图形的过程
(1)创建画布：使用html5中画布标签

<canvas id="id" width="宽度" height="高度">
</canvas>

(2)JavaScript中获取画布

 document.getElementById('id')

(3)准备画笔：context对象(画笔)，也称为绘制环境，使用该对象在画布中绘制图形

 getContext('2d')

3、绘图
(1)绘制线条：
A、初始位置、连线端点(终点)、描边(画线)
B、2d平面坐标系：画布的左上角是坐标原点(0,0),从原点开始向右延伸是x轴增大,向下延伸是y轴增大
C、画线过程：
a、确定初始位置(起始点)：moveTo(x,y)
b、确定连接端点(终点)：lineTo(x,y)
c、描边：stroke()
D、线条的样式
a、线宽：lineWidth =‘数值’ ,默认以像素为单位
b、描边的颜色(线条颜色): strokeStyle = ‘颜色名或16进制颜色值’
c、端点的形状：lineCap = ‘形状’

• butt：默认值，无端点形状，显示的是直线的方形边缘
• round：圆形端点
• square：方形端点
  E、线的路径：在同一个画布中添加再多的连线端点路径只有一条
  a、开始新的路径：beginPath()
  b、闭合路径：closePath()
  c、路径填充：fill()
  示例

ontext.strokeStyle = 'red' //描边的颜色
context.moveTo(10,10); //起始位置
context.lineTo(10,100);//连线端点(竖线)
context.lineTo(100,100);//连线端点(横线)
context.closePath();//闭合路径
context.stroke();//描边
context.fill(); //填充	

(2)绘制圆：arc(x,y,r,开始角,结束角,方向)
x,y ：圆心的坐标 r：圆的半径
开始角：可以圆周率
结束角：同开始角相同
方向：绘图方向(顺时针、逆时针)，true表示逆时针，false表示顺时针(默认)
示例

var canvas = document.getElementById(