canvas是HTML5新增的一个标签，用于在页面上绘制图形和文字。canvas本身很简单，使用时只需要在目标区域添加<canvas></canvas> 即可。canvas之所以强大是因为它提供了一系列的API，配合JavaScript使用，可以绘制出很多非常绚丽的效果，包括游戏！同样是绘制图形，还有一个标签是SVG，功能上和canvas基本类似，但canvas与SVG也有不同，的主要区别有以下几点：
对于canvas
- 使用基于JavaScript的API
- 通过创建画布(getContext())，在画布上进行图形绘制，页面上不会出现图形的HTML内容
- 所绘制的图形不能绑定事件，只有canvas自身能绑定事件
- 绘制出的图形质量会随着分辨率的增高而下降
- 能够以 .png 或 .jpg 格式保存结果图像
- 更多的是应用在游戏开发
对于SVG
- 基于XLM
- 绘制的图形都是对象，页面（HTML）中可见
- 每一个绘制的图形都能绑定事件
- 所绘制的图形是矢量图，不依赖分辨率
- 适合大型区域的渲染
- 不适合游戏开发
canvas的API（所有的绘制都在JavaScript中进行）：
以下所有示例中画布的背景色（白色除外）都是自定义的canvas的背景色
找到canvas元素
var canvas=document.getElementById("canvas");创建画布
var cxt=canvas.getContext("2d");绘制图形
样式
颜色：
fillStyel–填充颜色，支持颜色名”red”,十六进制”#fff000”,rgb(255,255,255)和rgba(255,255,0,0.5),a表示透明度
strokeStyle—笔触的颜色，取值同上
渐变：
createLinearGradient(x1,y1,x2,y2)—颜色线性渐变，(x1,y1)渐变起始点，(x2,y2)渐变终点。var mygrd=cxt.createLinearGradient(0,0,150,0)
使用mygrd.addColorStop(stop，"color")来设置渐变的颜色和指定颜色渐变的终点，stop取值0-1，该方法可多次使用，即添加多个颜色。最后还需要用cxt.fillStyle=mygrd填充（或cxt.strokeStyle=mygrd）
createRadialGradient(x1,y1,r1,x2,y2,r2)—径向渐变，(x1,y1,r1)是渐变开始圆的圆心坐标与半径，(x2,y2,r2)是渐变结束圆的圆心坐标与半径
阴影：
shadowColor–设置阴影颜色
shadowBlur—设置阴影模糊级别，值为数字
shadowOffsetX—设置阴影x方向的偏移量，值为数字
shadowOffsetY—设置阴影y方向的偏移量，值为数字
线条样式：
lineCap—设置线条结束点的样式，默认butt–平直，round–圆形帽，square–正方形帽
lineWidth—设置当前线条宽度，值为数字，不加单位
miterLimit—连接点的延伸长度（斜的）
lineJoin—两线交点形成的拐点类型，取值bevel–斜角，round–圆角，miter–尖角
路径
beginPath()–去除当前的任何路径，从新开始一个路径
closePath()–关闭当前打开的路径
clip()–从画布中裁剪任意形状和大小的区域
fill()–填充当前绘图
stroke()–绘制已定义的路径（相当于描边）
lineTo(x,y)–添加一个新的点，然后创建该点到最后一个指定点的线条
moveTo(x,y)–移动路径到画布中的指定点（设置一个起始点）
quadraticCurveTo(cp1x,cp1y,x,y)–二次贝赛尔曲线，(cp1x,cp1y)是用于二次贝塞尔计算的控制点，(x,y)是曲线的终点，起点是当前路径中的最后一个点，或者重新用beginPath()和moveTo()设置的新起点
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)–三次贝赛尔曲线，((cp1x,cp1y)第一个控制点的坐标，(cp2x,cp2y)第二个控制点的坐标，(x,y)结束点的坐标
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>红心</title>
<style type="text/css"></style>
</head>
<body>
<canvas width="800px" height="800px" style="border:1px solid black" id="canvas"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.fillStyle="red";
cxt.moveTo(250,200);
cxt.bezierCurveTo(140,110,60,270,250,380);
cxt.fill();
//绘制右边对称的三次贝塞尔曲线
cxt.beginPath();
cxt.fillStyle="red";
cxt.moveTo(250,200);
cxt.bezierCurveTo(360,110,440,270,250,380);
cxt.fill();
</script>
</html>效果图：
图形
矩形
cxt.rect(x,y,width,height)
x—矩形起始点（左上角）的x坐标
y—矩形起始点（左上角）的y坐标
width–矩形的宽度
clearRect(x,y,width,height)–清空指定矩形区域内的像素
注：canvas的左上角坐标是(0,0)
弧形
cxt.arcTo(x1,y1,x2,y2,r)
圆形
cxt.arc(x,y,r,startAngle,endAngle,anticlockwise)
x—圆形的x坐标
y—圆心的y坐标
r—圆心的半径
startAngle–开始绘制的角度，Math.PI*n
endAngle–结束的角度，Math.PI*x，一个Math.PI即一个π为180度，所以绘制整圆结束角度为Math.PI*2
anticlockwise–可选，表示顺时针还是逆时针，false为顺时针，true为逆时针，不写的话默认为顺时针
示例，太极图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>canvas绘制太极图</title>
</head>
<body>
<canvas width="500px" height="500px" id="canvas"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//绘制外边的空心大圆
context.beginPath();
context.arc(250,250,200,0,Math.PI*2);
context.stroke();
//由右半圆绘制成黑色
context.beginPath();
context.arc(250,250,200,Math.PI*3/2,Math.PI/2);
context.fill();//默认填充黑色
//绘制上半部分的左边变黑色小圆，半径为50
context.beginPath();
context.arc(250,150,100,Math.PI/2,Math.PI*3/2);
context.closePath();
context.fill();
//绘制上半部分左边小圆里的小白点，半径为20；
context.fillStyle="#fff";
context.beginPath();
context.arc(250,150,20,0,Math.PI*2);
context.fill();
//绘制下半部分右边的白色小圆
context.fillStyle="#fff";
context.beginPath();
context.arc(250,350,100,0,Math.PI*2);
context.fill();
//绘制右下半部分的小黑点
context.fillStyle="#000";
context.beginPath();
context.arc(250,350,20,0,Math.PI*2);
context.fill();
</script>
</html>
效果图：
创建文本
cxt.fillText(“字符”,x,y)–创建实体文本, x和y表示起始位置
cxt.strokeText(“字符”,x,y)–创建空心文本
cxt.font–用于设置字体大小和字体，不能设置颜色，区别与CSS中的font
textAlign—设置当前文本对齐方式，但是，它显示的效果并不是常规意义上的对齐；五个取值：
- start ：指定位置开始，默认值
- end-指定位置结束
- center-指定文本中心位置
- left-文本在指定位置开始
- right-指定位置结束
示例：
cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(100,300);
cxt.stroke();
cxt.textAlign="start";
cxt.fillText("我站开始位置",100,120);
cxt.textAlign="left";
cxt.fillStyle="red";
cxt.fillText("我站左边",100,140);
cxt.textAlign="right";
cxt.fillStyle="green";
cxt.fillText("我站右边",100,160);
cxt.textAlign="center";
cxt.fillStyle="blue";
cxt.fillText("我站中间",100,180);
cxt.textAlign="end";
cxt.fillStyle="purple";
cxt.fillText("我站结束点",100,200);效果：
textBaseline—设置文本基线，六个取值：top||hanging||middle||alphabetic||ideographic||bottom
以下是各种基线的效果
线形
moveTo(x,y)–设置起点坐标
lineTo(x,y)–设置终点坐标
一般都是成对使用，如果第二次没有设置moveTo(x,y),默认上一个lineTo(x,y)为起点，比如画折线
cxt.beginPath();
cxt.moveTo(100,150);
cxt.lineTo(100,100);
cxt.lineTo(130,200);
cxt.stroke();
图像或视频
drawImage(mydata,x,y*[,width,height]*)
- mydata：要添加的图片或视频，通过js创建var myimg=new Image();myimg.src="xxx.jpg";或者获取var myimg=document.getElementById("xx");/*获取图像*/ var myvideo=document.getElementById("xxx");/*获取视频*/
- x，y：图像左上角的坐标
- width：设置图像或视频的宽度
由于浏览器加载js代码的速度快于加载图片的速度，所有为了保证图片或视频的正常显示，需要在图片或视频加载完之后再执行drawImage()，方法：mydata.οnlοad=function(){cxt.drawImage(mydata,x,y)}
转换
scale(scalewidth,scaleheight)–缩放当前绘图，scalewidth等价于x轴方向的缩放，scaleheight即y轴方向的缩放，不能只写一个值。如果执行缩放，图形的定位(x,y不为0)也会被对应比例的缩放。如果重复执行绘制和缩放，那么每一次的缩放效果都是在上一次的缩放基础上再次缩放，看示例
cxt.strokeRect(10,10,50,50);
cxt.scale(1.5,1.5);
cxt.strokeRect(10,10,50,50);
cxt.scale(1.5,1.5);
cxt.strokeRect(10,10,50,50);效果图
rotate(n*Math.PI/180)--旋转此方法调用之后所绘图形，本质上旋转的是画布，而不是图形
translate(x,y)–重新映射画布上的(0,0)位置，也就是将图形的左上角分别向x轴和y轴偏移
transform(a,b,c,d,e,f)–替换当前的变换矩阵
-a :水平方向缩放
- b：垂直缩放
- c：水平倾斜
- d：垂直倾斜
- e：水平位移
- f：垂直位移
单独设置a、d等同使用scale()；单独设置e、f且a=1、d=1（即不缩放），等同于使用translate()
save()和restore()
save()–保存当前绘图的样式，只保存样式(包括变换)，不保存内容；连续调用，可将样式保存在栈结构中
restore()–可以逐级返回栈结构中保存的样式
模式
cxt.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”)–绘制重复图像
图像数据
cxt.getImageData(startx,starty,width,height)–返回指定区域的图像相关数据，包含三个属性：width，height，data，其中data是一个保存图像颜色rgba值的数组
cxt.putImageData(imgdata,startx,starty)-设置所取图像的颜色
合成
cxt.globalApha–修改全局的透明度，取值0-1
cxt.globalCompositionOperation–设置图形的结合样式，一共11个值
好了，这写只是canvas的基本用法，canvas之强大还需要跟深入的研究和操练
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
