HTML5Canvas绘图（上）

1.Canvas绘制步骤

• 在html5页面中添加canvas元素，定义id属性值以便后面调用

          

• 使用id寻找页面中的canvas元素

          var c=document.getElementById("myCanvas");

• 通过canvas元素的getContext方法来获取其上下文（Context），即创建context对象，以获取允许绘制的2D环境

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

• 使用javascript脚本来进行绘制

         context.fillStyle="#ff0000";

         context.fillRect(50,25,100,50);

运行结果：

 2.绘制直线相关方法及属性

方法：

• beginPath()：定义绘制动作的开始
• moveTo()：绘制图形的起点位置
• lineTo()：绘制图形的重点位置
• stroke()：为所画的线赋予颜色，如没有指定，默认为黑色

属性：

• lineWidth：直线的宽度
• strokeStvle：直线的颜色
• 直线端点样式：用lineCap属性设定，包括三种样式，分别为butt，round，square

3.绘制弧线和曲线  

          arcTo(x1,y1,x2,y2,radius) ;包含五个参数，（x1,y1）是端点1，（x2,y2）是端点2，radius是绘制的弧线的半径，此方法就是利用第一条线的终点、端点1、端点2组成的夹角，与夹角两边相切并以radius为半径画弧线，详情实例见下面代码。

•  arcTo()：创建介于两个切线之间的弧/曲线
• quadraticCurveTo()：绘制二次曲线，每条二次曲线由上下文点、一个控制点和一个终止点来定义

 

• bezierCurveTo()：绘制贝塞尔曲线，每条贝塞尔曲线由上下文点、两个控制点和一个终止点来确定