html 5 canvas入门函数简介

1.画布标签 <canvas id="myCanvas" width=450 height=300 margin-top =0px;margin-left=0px style="border:1px solid #c3c3c3;">

上例画出画布，并设置其大小和边框风格，对齐方式，与普通标签属性基本相同，不做详细介绍。

2.在canvas画布上作画，需要用javascript函数对其进行控制，使用以下语句获得API接口实例，对画布进行操作：

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

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

看到2d是否会联想到令人激动的3d？可惜的是，canvas目前还没有3d这么一说

3.画线：

context.moveTo(x1, y1);

context.lineTo(x2, y2);

画出从x1,y1到x2,y2的线段，可以用：

context.strokeStyle = "black";

context.lineWidth = 2;

设置线条的属性

4.画矩形：

示例代码如下，注释中有对函数的解释：

5.画个圆吧：

context.fillStyle="#FF0000"; context.beginPath(); //这个函数可以使得作画从新开始，不加此函数容易造成作画出现重复 context.arc(70,18,15,0,Math.PI*2,true); context.closePath(); context.fill();
效果是一个实心的红色圆，各个参数的含义依次为：圆心坐标为（70， 18） 半径为15， 起始角为0°，终止角为360°，画方向为顺时针(逆时针自然为false咯)

6.来几条贝塞尔曲线？

支持二次贝塞尔曲线和三次贝塞尔曲线，有点意思，以下有具体的介绍，链接，可以用它做很多事情哦~~

7.插入图片：

使用函数如下：

drawImage这个函数被重载过，可以有3个、5个或9个参数

3个参数：最基本的 drawImage使用方法。一个参数指定图像源，另两个参数设置图像在 canvas中的位置。

5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。

9个参数：最复杂 drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

先告一段落吧，用这些函数已经可以做很多事情了哦~