一. canvas简介
canvas是html5新增的元素,主要用于图形的绘制。canvas本身没有绘图能力,一切都是通过javascript来完成的。
二. canvas使用
- 在html中添加canvas元素,定义canvas元素的高宽
<canvas id="canv" width="200px" height="200px"></canvas>
- 在javascript代码中获取canvas元素对象
var canvas = document.getElementById("canv");
- 调用该对象的getContext(“2d”)方法获取上下文
var context = canvas.getContext("2d");
- 使用上下文对象在canvas上绘制图形。绘制图形的方法在下一部分介绍
三. 绘制图形的方法
- 绘制直线
context.moveTo(x, y); // 定义直线的起点
context.lineTo(x, y); // 定义直线的终点
context.stroke(); // 绘制直线
- 绘制扇形(圆也可以认为是扇形)
context.arc(originX, originY, r, startRad, stopRad); // 定义扇形(包括圆心坐标,半径以及开始绘制和结束绘制的弧度)
context.stroke(); // 绘制扇形
- 绘制矩形
context.fillRect(x, y, width, height); // 绘制矩形,(x,y)表示矩形左上角顶点的坐标
- 绘制文本
context.fillText(text, x, y); // 绘制文本,(x, y)表示文本左下角的坐标
- 绘制图像
var img = document.getElementById("testImage"); // 获取图像元素对象
context.drawImage(img, x, y); // 绘制图像,(x, y)表示图像左上角坐标
四. 上下文对象的属性
- fillStyle
用来定义绘制样式。可以在绘制直线,扇形,矩形和文本时使用。取值可以时颜色,渐变或图案,默认是颜色#000000。
context.fillStyle = "red"; // 设置绘制样式为红色
context.fillRect(x, y, width, height); // 此时矩形是红色的
fillStyle的取值可以是渐变。创建渐变的代码如下:
var grd = context.createLinearGradient(x, y, x1, y1); // 创建线性渐变
grd.addColorStop(0, "red"); // 设置渐变起始颜色为红色
grd.addColorStop(0, "blue"); // 设置渐变结束颜色为蓝色
var grd = context.createRadialGradient(x, y, r, x1, y1, r1); // 创建径向渐变
grd.addColorStop(0, "red"); // 设置渐变起始颜色为红色
grd.addColorStop(0, "blue"); // 设置渐变结束颜色为蓝色
- font
用来定义绘制文本时的使用字体。
context.font = "幼圆"; // 使用幼圆字体
context.fillText(text, x, y); // 使用幼圆字体绘制文本