主要学习canvas的基本绘图功能，包括画直线、路径、图形绘制、渐变、模式、图像和文本。
- 先了解canvas元素
|
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 在此添加绘图代码
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
|
我们可以用canvas标签的id获得canvas的DOM对象，并用getContext() 方法获得这个canvas的“2d”上下文对象，其后的绘图操作都将以此上下文对象为基础。
2. 直线
画直线的功能可以用 beginPath()， moveTo()， lineTo() 和 stroke() 几个方法的组合来实现。
|
... ...
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 5;
context.strokeStyle = "#ff0000";
context.lineCap = "butt";
context.stroke();
... ...
|
方法 beginPath() 定义了一个新的路径绘制动作的开始。
方法 moveTo() 为指定点创建了一个新的子路径，这个点就变成了新的上下文点。我们可以把moveTo() 方法看成用来定位我们的绘图鼠标用的。
方法 lineTo() 以上下文点为起点，到方法参数中指定的点之间画一条直线。
方法 stroke() 为所画的线赋予颜色，并使其可见。如果没有特别的指定颜色的话，则默认使用黑色画直线。
直线的宽度用lineWidth 属性设定。
直线的颜色用 strokeStyle 属性设定。
HTML5 canvas支持3种直线的端点样式，包括： butt， round， 和 square。 设定端点样式是用lineCap属性设定。缺省情况下，将使用butt样式。
3. 弧线
画弧线的方法是 arc() 。每条弧线都需要由中心点、半径、起始角度（弧度n*Math.PI）、结束角度（弧度m*Math.PI）和绘图方向（顺时针 false 还是逆时针 true ）这几个参数来确定。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle,
counterClockwise);
context.lineWidth = 15;
// 设置线的颜色
context.strokeStyle = "black";
context.stroke();
|
4. 二次曲线
二次曲线使用 quadraticCurveTo() 方法来绘制。每条二次曲线要由上下文点、一个控制点和一个终止点来定义。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
// line color
context.strokeStyle = "black";
context.stroke();
|
5. 路径
路径是由多条子路径连接构成的。每条子路径的终止点就将作为新的上下文点。我们可以使用lineTo()， arcTo()， quadraticCurveTo() 和 bezierCurveTo() 创建新的子路径。每次要开始画一条路径的时候就要使用 beginPath() 方法。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 20);
// 第一条直线
context.lineTo(200, 160);
// 二次曲线
context.quadraticCurveTo(230, 200, 250, 120);
// 贝塞尔曲线
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
// 第二条直线
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = "blue";
context.lineJoin = "miter";
context.stroke();
|
HTML5 canvas支持3种线条的连接样式，包括： miter， round， 和 bevel。 设定连接样式是用 lineJoin 属性设定。缺省情况下，将使用 miter 样式。
6. 圆角
画圆角使用方法 arcTo() 。此方法需要一个控制点、一个终止点和半径作为必要的参数。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var rectWidth = 200;
var rectHeight = 100;
var rectX = 189;
var rectY = 50;
var cornerRadius = 50;
context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth - cornerRadius, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY
+ cornerRadius, cornerRadius);
context.lineTo(rectX + rectWidth, rectY + rectHeight);
context.lineWidth = 5;
context.stroke();
|
7. 图形
要画一个用户自定义的图形，需要创建一个路径，然后用 closePath() 方法关闭此路径即可。我们可以使用lineTo()， arcTo()， quadraticCurveTo() 或 bezierCurveTo() 来创建每个子路径，然后用这些子路径组成想要的图形。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 开始用户图形的绘制
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// 完成用户图形的绘制
context.closePath();
context.lineWidth = 5;
context.fillStyle = "#8ED6FF";
context.fill();
context.strokeStyle = "blue";
context.stroke();
|
8. 矩形
绘制矩形使用 rect() 方法。每个矩形需要由左上角坐标 (x, y) 和矩形的宽与高 (width, height)来确定。
|
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
|
9. 圆
画圆只需要在调用 arc() 方法时，将起始角度设为0，终止角度设为 2 * PI 即可。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
|
10. 线性渐变和径向渐变
|
// 创建线性渐变对象
var grd = context.createLinearGradient(230, 0, 370, 200);
// 添加渐变的起点处颜色
grd.addColorStop(0, "#8ED6FF");
// 添加渐变终点处的颜色
grd.addColorStop(1, "#004CB3");
... ...
// 创建径向渐变对象
var grd = context.createRadialGradient(238, 50, 10, 238, 50,
200);
// 设置渐变起始圆处的颜色
grd.addColorStop(0, "#8ED6FF");
// 设置渐变终止圆处的颜色
grd.addColorStop(1, "#004CB3");
|
11. 文本
要设置字体、大小和样式，需要用到上下文对象的 font 属性。样式可以是 normal, italic 或 bold 。默认情况是 normal 。
|
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "italic 40pt Calibri";
context.fillStyle = "blue";
context.fillText("Hello World!", 150, 100);
context.textAlign = "center";
context.lineWidth = 3;
// 轮廓线的颜色
context.strokeStyle = "blue";
context.strokeText("Hello World!", 80,110);
|
要描绘字体边缘的效果，要使用 strokeText() 方法替代fillText()，同时要用 strokeStyle 属性替代 fillStyle 属性。
文本的对齐功能设定使用 textAlign 属性。其可用的选项包括 start, end, left, center 和 right 。
