HTML之Canvas标签及对应属性、API详解

听说HTMl很火，自己也是借了几本书，想深刻了解一下，翻书一看，又惊又喜，这不是在大学还学过半年呢嘛，毕业设计就是和这个网页设计相关的，正好，前边几章大致翻阅一下复习，着重看了后边的章节，今天看了一个canvas标签，感觉挺有用的，其实知识都是一样的，我现在在做iOS开发，也经常会用到划线方法，DrawInRect，CGContext等，和这个Canvas是非常相似的，自己也是写了点demo，代码片段和大家分享一下：

标签：

知识说明：

       HTML5新增的canvas标签，通过创建画布，在画布上创建任何想要的形状，下面将canvas的API以及属性做一个整理，并且附上时钟的示例，便于后期复习学习！Fighting！

一、标签原型

       您的浏览器版本过低，不支持HTML5新增的canvas标签。

使用js获取该画布，并指定对象

二、canvas标签常见属性

属性	值	功能描述
width	pixels	设置canvas的宽度
height	pixels	设置canvas的高度

三、canvas标签的API整合

属性	值	功能描述
save()	Canvas.save();	保存当前画布环境状态
Restore()	Canvas.restore();	返回之前保存的画布的路径状态，与save()成对用
getContext()	Canvas.getContext();	返回一个对象，指出访问绘图功能必要的API
toDataURL()	Canvas.toDataURL();	返回canvas图像的url

四、canvas标签API的主要属性整合

a、 画圆

属性	值	功能描述
fillStyle	Canvas.fillStyle=”#f00”	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	Canvas.strokeStyle=”#f0f”;	设置或返回用于笔触的颜色、渐变或模式
beginPath()	Canvas.beginPath();	开启画路径
closePath()	Canvas.closePath();	关闭画路径
Arc()	Canvas.arc(0,0,10,0,360,false); 参数：原点X、原点Y、原点起始弧度，原点结束弧度、顺时针/逆时针	画圆
Fill()	Canvas.fill()	填充
Stroke()	Canvas.stroke()	画边框

画圆代码片段：

b、 画线

属性	值	功能描述
Translate	Canvas.translate(200,200)	重置坐标原点
lineWidth	Canvas. lineWidth=10;	设置线的宽度
moveTo ()	Canvas. moveTo (0,0);	开始画线的初始位置
lineTo ()	Canvas. lineTo (100,0);	画线结束点位置

画线代码片段：

c、 画多边形

画三角形代码片段：

//画多边形，此处以三角形为例

d、 画文字

画文字代码片段：

以上a、b、c、d整合效果如下图：

五、使用canvas标签绘制时钟

代码片段：

      您的浏览器版本太低，不支持显示时钟的canvas标签

      

      

绘制结果如下图：

Hope To Help You !

技术交流群：141624834 进群请说你看的那篇博客，我们一起探讨成长

 

HTML5新增Canvas标签及对应属性、API详