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.画矩形：

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

1 2 3 4 5 6

context.fillStyle = "rgba(0, 0, 200, 0.5)";  //填充的颜色，三个参数分别是：红绿蓝深度，透明度  context.strokeStyle = "000";  //边框颜色  context.lineWidth= 1 ;  //边框宽               context.fillRect(x, y, w, h);  //填充颜色 x y坐标 宽 高  context.strokeRect(x, y, w, h);  //填充边框 x y坐标 宽 高

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.插入图片：

使用函数如下：

1 2 3 4 5 6

var img=new Image();  img.src="图片.jpg";    img.onload = function () //确保图片已经加载完毕    {        context.drawImage(img,0,0);    }

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

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

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

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

 

 

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