65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 Canvas - Aqua Gauge

Ambalavanar Thirugnanam
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.97/5 (24投票s)

2011年12月23日

CPOL

3分钟阅读

viewsIcon

140082

downloadIcon

6225

使用 HTML5 Canvas 的仪表控件

引言

我们都知道 HTML5 正在快速发展，并且已经几乎取代了 Silverlight 和 Flash。因此，我开始学习 HTML5 并探索它有趣之处。学完之后，我发现 HTML5 很有趣，易于学习，并且我认为它是客户端应用的未来。我通过开发一个 UI 控件开始了学习。作为例子，我选择了编写一个仪表盘控件，这是我几年前用 .NET 2.0 开发的（Aqua Gauge）。

通过这个应用，我尝试解释一些 HTML5 canvas API 以及仪表盘控件的完整实现。

Sample Image

如何开始？

我们只需要具备 HTML、JavaScript、CSS 的基础知识、一个文本编辑器，当然，还有一个兼容 HTML5 的浏览器。HTML5 提供了许多新功能来创建丰富的 Internet 应用程序。在这里，我将专注于“canvas”元素。要开始，请打开一个文本编辑器，输入以下 HTML 代码，并将其保存为“index.html”。

<!DOCTYPE html>
<html>
<head><title>My first HTML5 App</title></head>
<body>
	<canvas width="300" height="200" style="border: 1px solid red;">
		Your browse doesn't support canvas :-(
	</canvas>
</body>
</html>

在浏览器中打开 index.html 文件。如果您看到一个红色的矩形，则表示您的浏览器支持 HTML5 canvas。否则，您需要升级您的浏览器才能继续。

在 Canvas 上绘图

现在，让我们向 index.html 添加几行 JavaScript 代码，在 canvas 上绘制一个矩形。

<!DOCTYPE html>
<html>
<head><title>My first HTML5 App</title>
<script language="javascript">
	function drawSomething() {
		var canvas = document.getElementById('drawingBoard');
		var context = canvas.getContext('2d');
		context.fillStyle = "blue";
		context.fillRect(10, 10, 200, 100);
	}
</script>
</head>
<body onload="drawSomething()">
	<canvas id="drawingBoard" width="300" height="150">
		Your browse doesn't support canvas :-(
	</canvas>
</body>
</html>

绘制带渐变的矩形

function drawSomething() {
    var canvas = document.getElementById('drawingBoard');
    var context = canvas.getContext('2d');

    var gradientBrush = context.createLinearGradient(0, 0, 0, canvas.width);
    gradientBrush.addColorStop(0, 'lightblue');
    gradientBrush.addColorStop(1, 'blue');
    context.fillStyle = gradientBrush;
    context.fillRect(0, 0, canvas.width, canvas.height);
}

Gradient Rectange

在矩形内绘制文本

context.fillStyle = "White";
context.font = "bold 30pt Arial";
var text = "HTML5 Canvas";
var txtWidth = context.measureText(text).width;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
context.fillText(text, centerX-txtWidth/2, centerY);
context.restore();

Gradient Rectange with text

添加代码以旋转文本

context.save();
context.fillStyle = "White";
context.font = "bold 30pt Arial";
var text = "HTML5 Canvas";
var txtWidth = context.measureText(text).width;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
context.translate(centerX, centerY);
context.rotate(-20 * Math.PI / 180);
context.fillText(text, -txtWidth/2, 0);
context.restore();

Gradient Rectange with rotated text

使用 arc() 绘制半透明圆

context.save();
//Text drawing code should go here. Below restore() will reset translate() 
//and rotate() operations.
context.restore();

context.fillStyle = "rgba(255, 255, 0 , 0.5)";
context.beginPath();
var x = canvas.width * 0.75;	
var y = canvas.height * 0.50;
var radius = 60;
var startAngle = 0;
var endAngle = 360 * Math.PI / 180;
context.arc(x, y, radius, startAngle, endAngle, true);
context.closePath();
context.fill();

Gradient Rectange with rotated text and translucent circle

Aqua Gauge 代码

现在我们知道如何使用 canvas 元素了！完整的 canvas API 规范可以在这里找到。源文件包包含以下文件：

  • Index.html – 用于承载 canvas 元素的 HTML 文件
  • js\AquaGauge.js – 包含仪表盘的实现
  • js\Helper.js – 包含用于从 HTML 控件更新仪表盘对象属性的实用方法
  • css\Styles.css – 用于布局页面的样式表。它使用了一些 CSS3 结构。
  • 存档中的所有其他文件都是 jQuery 相关文件，用于启用滑块控件。

您现在可以探索 aqua gauge 的源代码了。以下是 aqua gauge 对象的属性：

属性名称 类型 描述
backgroundColor Color 整个 canvas 的背景颜色
dialColor Color 圆形刻度盘区域的背景颜色
dialGradientColor Color 圆形刻度盘区域内部用于渐变的背景颜色
dialTitle 字符串 刻度盘标题文本。将显示在顶部
dialTitleTextFont 字体 刻度盘标题文本字体样式
dialTitleTextColor Color 刻度盘标题文本前景色
dialSubTitle 字符串 刻度盘副标题文本。将显示在底部
dialSubTitleTextFont 字体 刻度盘副标题文本字体样式
dialSubTitleTextColor 颜色 刻度盘副标题文本前景色
dialValueTextFont 字体 当前值文本字体样式
dialValueTextColor Color 当前值文本前景色
showGlossiness Bool 显示或隐藏光泽效果
minValue Int 最小值
maxValue Int 最大值
noOfDivisions Int 刻度线上的刻度/分割数量
noOfSubDivisions Int 刻度线上的子刻度/子分割数量
majorDivisionColor Color 主刻度线颜色
minorDivisionColor Color 次刻度线颜色
rimColor Color 边缘弧线颜色
rimWidth Int 边缘弧线线宽/厚度
rangeSegments 数组 定义边缘上的颜色范围。应为 {start: [int], end: [int], color: [color] } 列表
rangeSegments[].start Int 范围弧线起始值
rangeSegments[].end Int 范围弧线结束值
rangeSegments[].color Color 范围弧线颜色
dialScaleFont 字体 主刻度文本字体样式
dialScaleTextColor Color 主刻度文本颜色
dialSubScaleFont 字体 次刻度文本字体样式
dialSubScaleTextColor Color 次刻度文本颜色
dialScaleTextShadowColor Color 刻度文本阴影颜色
showMinorScaleValue Bool 显示或隐藏次刻度值文本
pointerColor Color 指针颜色
pointerGradientColor Color 指针渐变颜色
shadowColor Color 指针阴影颜色
currentValue float 指针指向的当前值

Using the Code

像上面的示例一样创建一个 HTML 页面，然后添加 AquaGauge.js 引用并按照下面的方法初始化控件。使用 aGauge.refresh(value) 来更新仪表盘的当前值。

<!DOCTYPE html>
<html>
<head>
    <title>Aqua Gauge</title>
    <script src="AquaGauge.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function showGauge() {
            var aGauge = new AquaGauge('gauge');
            aGauge.props.minValue = 0;
            aGauge.props.maxValue = 100;
            aGauge.refresh(45);
        }
    </script>
</head>
<body onload="showGauge()">
    <canvas id="gauge" width="300" height="300">Browser not supported.</canvas>
</body>
</html>

结论

我才刚刚开始学习 HTML5 及其相关组件。我很高兴能在一天内写出这个！但是，代码没有经过适当的验证，也没有经过充分的测试。希望您喜欢这篇文章。

历史

  • 2011年12月23日：初版
© . All rights reserved.