摘要:
HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5。从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需。
历史:
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
浏览器:
从图中可以看出IE9+都支持canvas。
API:
使用前,首先需要新建一个canvas网页元素。如下:
<canvas id="myCanvas" width="800" height="600">
您的浏览器版本太低,不支持canvas!
</canvas>
如果浏览器不支持canvas标签,页面上就会显示‘您的浏览器版本太低,不支持canvas!’。每个canvas元素都有一个方法--getContext方法,返回一个用于在画布上绘图的环境。
var canvas = document.getElementById('myCanvas');
canvas.getContext(contextID);
参数:
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
返回值:
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型(2 维、3 维)提供不同的环境。当前,唯一支持的是 "2d",它返回一个 CanvasRenderingContext2D 对象,该对象实现了一个画布所使用的大多数方法。
在画图之前先讲下坐标,每一个图的原点坐标(0,0)在图的左上角,x轴正方向水平向右,y轴正方向水平向下。
Demo:
1、线
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 开始
ctx.moveTo(20, 20); // 设置线的起点,坐标为(20,20)
ctx.lineTo(100, 100); // 设置线的终点,坐标为(100,100)
ctx.lineWidth = 5; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.stroke(); // 进行线的着色
}
</script>
注意:moveTo和lineTo方法可以多次使用。最后可以用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,也可以使用一次lineto方法来封闭图形。
2、三角形
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath(); //开始
ctx.lineWidth=3; //边框的宽度
ctx.moveTo(0,350); //三角型的顶点
ctx.lineTo(100,250); //三角型的顶点
ctx.lineTo(200,300); //三角型的顶点
ctx.closePath(); //可选步骤,关闭绘制的路径
ctx.strokeStyle = "#CC0000"; //设置线的颜色
ctx.stroke(); //边着色
}
</script>
3、正方型
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(100,10);
ctx.lineTo(100,100);
ctx.lineTo(10,100);
ctx.lineTo(10,10);
ctx.strokeStyle="#CC0000";
ctx.lineWidth=3;
ctx.stroke();
}
</script>
4、矩形
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#CC0000'; //设置矩形的填充色
ctx.fillRect(50, 50, 200, 100); //fillRect(x, y, width, height),矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高
}
</script>
5、空心矩
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
ctx.strokeStyle="#CC0000";
ctx.strokeRect(10,10,200,100); //strokeRect(x, y, width, height),矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高
ctx.stroke();
}
</script>
清楚填充矩形一部分
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#CC0000';
ctx.fillRect(50, 50, 200, 100);
ctx.clearRect(100,50,50,50);//clearRect(x, y, width, height),清除矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高
}
</script>
6、圆形
填充圆
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true); //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)
ctx.fillStyle = "#CC0000";
ctx.fill();
}
</script>
空心圆
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.lineWidth = 5;
ctx.strokeStyle = "#CC0000";
ctx.stroke();
}
</script>
7、绘制文本
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.font = "Bold 20px 雅黑"; // 设置字体
ctx.textAlign = "left"; // 设置对齐方式
ctx.fillStyle = "#CC0000"; // 设置填充颜色
ctx.fillText("你好!", 10, 50); // fillText(string, x, y)文本内容、起点的x坐标、y坐标
ctx.strokeStyle = '#CC0000';
ctx.strokeText("你好!", 10, 100); // 绘制空心字
}
</script>
注意:fillText和strokeText方法不支持文本断行
8、渐变色
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);// createLinearGradient(x1, y1, x2, y2)x1和y1是起点坐标,x2和y2是终点坐标。通过不同的坐标值,可以生成从上至下、从左到右的渐变等等。
grd.addColorStop(0,"black");// addColorStop(stop,color)stop介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。color在结束位置显示的 CSS 颜色值
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
}
</script>
圆形渐
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var grd=ctx.createRadialGradient(75,50,5,90,60,100);//createRadialGradient(x0,y0,r0,x1,y1,r1);x0渐变的开始圆的x坐标,y0 渐变的开始圆的y坐标,r0开始圆的半径,x1渐变的结束圆的x坐标,y1渐变的结束圆的y坐标,r1结束圆的半径
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
}
</script>
边框渐变
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red"); // 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
}
</script>
9、设置阴影
<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持canvas!
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "#cc2111"; // 设置阴影颜色
ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,200,100);
}
</script>
附录:
颜色、样式和阴影
属性 | 描述 |
---|---|
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
shadowColor | 设置或返回用于阴影的颜色 |
shadowBlur | 设置或返回用于阴影的模糊级别 |
shadowOffsetX | 设置或返回阴影距形状的水平距离 |
shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
方法 | 描述 |
---|---|
createLinearGradient() | 创建线性渐变(用在画布内容上) |
createPattern() | 在指定的方向上重复指定的元素 |
createRadialGradient() | 创建放射状/环形的渐变(用在画布内容上) |
addColorStop() | 规定渐变对象中的颜色和停止位置 |
线条样式
属性 | 描述 |
---|---|
lineCap | 设置或返回线条的结束端点样式 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型 |
lineWidth | 设置或返回当前的线条宽度 |
miterLimit | 设置或返回最大斜接长度 |
矩形
方法 | 描述 |
---|---|
rect() | 创建矩形 |
fillRect() | 绘制“被填充”的矩形 |
strokeRect() | 绘制矩形(无填充) |
clearRect() | 在给定的矩形内清除指定的像素 |
路径
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径) |
stroke() | 绘制已定义的路径 |
beginPath() | 起始一条路径,或重置当前路径 |
moveTo() | 把路径移动到画布中的指定点,不创建线条 |
closePath() | 创建从当前点回到起始点的路径 |
lineTo() | 添加一个新点,然后在画布中创建从该点到最后指定点的线条 |
clip() | 从原始画布剪切任意形状和尺寸的区域 |
quadraticCurveTo() | 创建二次贝塞尔曲线 |
bezierCurveTo() | 创建三次方贝塞尔曲线 |
arc() | 创建弧/曲线(用于创建圆形或部分圆) |
arcTo() | 创建两切线之间的弧/曲线 |
isPointInPath() | 如果指定的点位于当前路径中,则返回 true,否则返回 false |
转换
方法 | 描述 |
---|---|
scale() | 缩放当前绘图至更大或更小 |
rotate() | 旋转当前绘图 |
translate() | 重新映射画布上的 (0,0) 位置 |
transform() | 替换绘图的当前转换矩阵 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
文本
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
方法 | 描述 |
---|---|
fillText() | 在画布上绘制“被填充的”文本 |
strokeText() | 在画布上绘制文本(无填充) |
measureText() | 返回包含指定文本宽度的对象 |
图像绘制
方法 | 描述 |
---|---|
drawImage() | 向画布上绘制图像、画布或视频 |
像素操作
属性 | 描述 |
---|---|
width | 返回 ImageData 对象的宽度 |
height | 返回 ImageData 对象的高度 |
data | 返回一个对象,其包含指定的 ImageData 对象的图像数据 |
方法 | 描述 |
---|---|
createImageData() | 创建新的、空白的 ImageData 对象 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上 |
合成
属性 | 描述 |
---|---|
globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
其他
方法 | 描述 |
---|---|
save() | 保存当前环境的状态 |
restore() | 返回之前保存过的路径状态和属性 |
createEvent() | |
getContext() | |
toDataURL() |