HTML5中的 Canvas

浏览数：27 / 时间：2015年06月09日

什么是Canvas？

Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。

我们可以用Canvas做以下：

1. 游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力，在很多节点时不会很卡。

2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，也可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。

3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。

4. 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

5. 字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。

6. 图形编辑器：Ohad预测，图形编辑器将能够100%基于Web实现。

7. 其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

绘制简单图形:

getContext()方法用来返回一个环境对象，该对象导出一个二维绘图API。可以理解为它返回的是一个用于在画布（canvas）上绘图的环境。其目前唯一的合法值为“2d”。

beginPath()方法在一个画布中开始子路径的一个新的集合。beginPath()丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为(0,0)。当一个画布的环境被第一次创建，beginPath()方法会被显式的调用。

closePath()方法关闭一条打开的子路径。
如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
如果子路径已经闭合了，这个方法不做任何事情。
一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过调用 moveTo()方法来开始一条新的子路径。

void moveTo(x, y);

用于显式地指定路径的起点。默认状态下，第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。

void lineTo(x, y);

用于描绘一条从起点从指定位置的直线路径，描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。

通过指定从何处开始，在何处结束，来绘制一条线：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
还有一些常用图形

void rect(left, top,width, height);

用于描绘一个已知左上角顶点位置以及宽和高的矩形，描绘完成后Context的绘制起点会移动到该矩形的左上角顶点。参数表示矩形左上角顶点的x、y坐标以及矩形的宽和高。

void arc(x, y, radius,startAngle, endAngle, anticlockwise);

用于描绘一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。

void stroke();

用于按照已有的路径绘制线条。

void fill();

用于使用当前的填充风格来填充路径的区域。

strokeStyle

线条的颜色，默认为”#000000”，其值可以设置为CSS颜色值、渐变对象或者模式对象。

fillStyle

填充的颜色，默认为”#000000”，与strokeStyle一样，值也可以设置为CSS颜色值、渐变对象或者模式对象。

lineWidth

线条的宽度，单位是像素（px），默认为1.0。

lineCap

线条的端点样式，有butt（无）、round（圆头）、square（方头）三种类型可供选择，默认为butt。

图形变形

平移context.translate(x,y)

x:坐标原点向x轴方向平移x

y:坐标原点向y轴方向平移y

缩放context.scale(x,y)

x:x坐标轴按x比例缩放

y:y坐标轴按y比例缩放

旋转context.rotate(angle)

angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）

HTML5 Canvas雪花特效，实现的动态效果的雪花飘飘落下，随机位置，随机数量，并且速度可调节。

<!DOCTYPE html>
<html>
<head>
<title>Canvas雪花飘啊飘</title>
</head>
<body>
<canvas id="mc" width="420" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
function createFlower(context,n,dx,dy,size,length){
context.beginPath();
context.moveTo(dx,dy+size);
var dig = 2*Math.PI/n;
for(var i=1;i<n+1;i++){
var ctrlX = Math.sin((i-0.5)*dig)*length+dx;
var ctrlY = Math.cos((i-0.5)*dig)*length+dy;
var x = Math.sin(i*dig)*size+dx;
var y = Math.cos(i*dig)*size+dy;
context.quadraticCurveTo(ctrlX,ctrlY,x,y);//画曲线
}
context.closePath();
}
snowPos = [
{x:50,y:44,z:5},{x:140,y:35,z:3},
{x:360,y:20,z:1},{x:250,y:50,z:2},
{x:110,y:90,z:4},{x:310,y:85,z:2},
{x:65,y:160,z:5},{x:205,y:130,z:5},
{x:300,y:150,z:3},{x:260,y:210,z:1},
{x:375,y:215,z:3},{x:155,y:230,z:2},
{x:30,y:270,z:4},];
function fall(context){
context.fillStyle = "#000";
context.fillRect(0,0,420,280);
context.fillStyle = "#fff";
for(var i=0,len=snowPos.length;i<len;i++){
context.save();
context.translate(snowPos[i].x,snowPos[i].y);//平移
context.rotate((Math.random()*6-3)*Math.PI/10);//旋转
snowPos[i].y += Math.random()*18;
if(snowPos[i].y>280){
snowPos[i].y=4;
}
createFlower(context,6,0,0,snowPos[i].z,8);
context.fill();
context.restore();
}
}
var canvas = document.getElementById("mc");
var ctx = canvas.getContext("2d");
setInterval("fall(ctx);",200);
</script>
</body>
</html>