主要学习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 。