Canvas的使用介绍(1)

Canvas是HTML中一种用于绘图的元素，下面我将详细的介绍其使用方法。

1.创建Canvas对象

<canvas width="500" height="500" id="myCanvas">

</canvas>

2.使用jq,获取canvas元素

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//获取Canvas元素
var canvas=$("#myCanvas");
//获取元素2D化,只有2D状态下才能绘图
var context=canvas.get(0).getContext("2d");
};
</script>

3.绘制一个矩形

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

参数定义如下：context.fillRect(x,y,width,height)

其中x,y表示图形所在的坐标方位；width,height表示元素的大小

Canvas的坐标系统是一种基于屏幕的标准绘图平台,与其他2D平台类似，

它采用平面的笛卡儿坐标系统，左上角为原点（0，0),向右移动时，x坐标值会增加，

向下移动时y坐标值会增加

3.绘制线段

context.beginPath();//开始路径
context.moveTo(40,40);//开始路径原点
context.lineTo(40,340);//设置路径终点
context.closePath();//结束路径
context.stroke();//绘制路径轮廓

4.绘制文本

var text="Hello,World";//创建文本
context.font="italic 50px serif";//设置字体
context.strokeText(text,200,40);//添加

5.绘制圆形

圆形是一个非常复杂的形状，因此Canvas实际上并没有专门绘制圆形的方法，

但是有一个方法可以绘制圆弧，圆弧实际上是圆形的组成部分，我们可以使用

“首尾相连”的方式绘制圆形，这点有点难懂，所以我们暂且不去解释，先在Canvas中创建一个圆形：

context.beginPath();//绘制路径
context.arc(230,90,50,0,Math.PI*2,false);//绘制一个圆形
context.closePath();//结束路径
context.fill();//填充路径

语法定义:

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

参数定义：

圆弧原点的(x,y)坐标值(也是我们例子中的圆心),圆弧半径，开始角度，结束角度和一个布尔值

如果圆弧按逆时针方向绘制,那么它为true，否则为false,前面三个参数都很简单，这里不做过多解释，

但是需要适当解释才能理解它们的使用方法，简言之，参考图3-8

一定要注意，Canvas中的角度是弧度而不是角度为单位的。简单说，360度(一个完整的圆)

是2pi弧度。

我们都知道将角度换算成弧度，我们可以按照以下公式进行计算(当然这里是用javaScript语句表示的）:

var degrees=1;//1度

var radians=degrees*(Math.PI/180);//0.0175弧度

现在你对角度在Canvas中的用法有所了解了，让我们把注意力转移回画圆形的例子。

在那个例子中，我们所画弧线的开始角度是0，结束角度是Math.PI*2,它们就是圆的开始

和结束角度，如果你还不确定请对照图3-9

运行这个例子，会在浏览器上看到你绘制的圆形。

那么，如果想要画一个半圆，应该如何设置结束角度呢？

参考图3-9,js代码如下

//绘制一个半圆
context.arc(230,90,50,0,Math.PI,false);

如果一切正常，应该会在浏览器上看到一个半圆

本节就写到这里，我会持续进行更新！