让我们在浏览器中进行基本图形绘制
4.50/5 (2投票s)
介绍 WebGL 和使用 JavaScript 进行基本图形编程。
引言
让我们想象一个没有谷歌的世界。当然，我们必须一切都依赖微软，说实话，这并不好（我的饭碗就来自微软技术）。今天我想开始一个关于 WebGL 的话题，以及它是从哪里开始的。
我们将从简单的计算机图形学术语和术语开始，然后扩展到创建基于 3D 的网页。但为此，我假设读者至少熟悉 JavaScript 和 HTML，并且可以进行一些编程。至于图形部分，我将进行解释以及它是如何关联的，并试图给出整个画面，以及所有这些（JavaScript/HTML/3D）是如何协同工作的。
为了获得更好的生产力和相似的结果，我建议使用 Komodo IDE for Windows 或 Unix/Linux 版本。那么，让我们开始吧……
顾名思义，WebGL 代表 Web 图形语言。它是 OpenGL 的一个衍生版本，专门用于 Web 开发。尽管 OpenGL 是使用 C++/C# 进行图形编程的标准语言，但由于其内存管理、指针等特性，人们通常会回避图形编程。
但 WebGL 将改变这一切。可以说，WebGL 是增强版的 OpenGL。为了保持简单，许多东西都被去掉了，并且引入了一种新的脚本语言来提供传统面向对象语言的功能。
入门
为什么选择 WebGL？？？
我遇到过很多人不认为它很重要。但我向您保证，这是一项非常新的技术，并将席卷一切。只需想象一个不需要任何插件或第三方支持（如 FlashPlayer、Silverlight）或专有技术的基于 Web 的应用程序。这就是 WebGL 可以做到的，它可以取代所有这一切，因为它是一个扩展 JavaScript 的图形库（JavaScript API）。
您只需要一个兼容 HTML5 的浏览器……是的，先生，这就是您所需要的全部。
（注意：IE 8.0/9.0 在较短的词语中不支持 HTML5……详细来说，我的意思是它不支持在 Web 浏览器上使用 JavaScript 进行 3D 功能，因为微软正忙于销售 Silverlight 而不是 HTML5（Canvas）（因为他们认为世界属于他们）。
我说到 Canvas 了……？？？
如果您完全阅读了这篇文章，并且突然您想“这 Canvas 是什么鬼东西”。
但让我告诉您，伙计们，这就是我们要绘制的地方。顾名思义，“Canvas”是 HTML 中的一个元素，就像任何其他元素一样。将 Canvas 视为一个视口或屏幕的一部分，您可以在其中执行绘制、绘画、缩放、旋转等一些重要的操作。想象一下，您可以使用它编写一个 Photoshop 应用程序，并赚取数百万……（好吧，这是我的计划）。一个简单的 Canvas 会看起来像
<canvas id="canvas_id" width="400" height="600" >
Canvas Not Supported On your Browser...I know Its IE...
<canvas>
无论如何，如果您的浏览器不支持此标签，您将收到一条消息。这是内部处理的，并且需要很多工作，因为该元素可以决定它是否受支持。
这就是 HTML5 如此特别的原因。正因如此，行业才如此分裂。微软说它不够安全，因为人们可以更改、窃取代码或图像，或者用于执行一些非法的事情……但让我告诉您，伙计们，“分享得越多，隐藏得越少”。
开放并看看可能改变世界的新事物……想想看，您愿意以自己的方式做事并保持灵活性并成为一名绝地武士，还是被迫走一条已知终点的黑暗之路……
让我们看看如何开始 WebGL……我们将编写一个简单的代码来测试我们的浏览器是否支持 WebGL。Canvas 有两个主要属性……一个是 2D，另一个是支持硬件渲染的 3D 加速……
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
( function ()
{
var check,context;
check = document.createElement('canvas');
if(check.getContext)
{
alert(" Canvas Not suppoted On your Browser ");
}
else
{
alert(" Canvas Not suppoted On your Browser ");
}
} ) ();
</script>
</head>
<body>
</body>
这段代码是不言自明的，它将测试您的浏览器是否符合 HTML5 标准，如果符合，是否支持最重要的元素“Canvas”，该元素将 HTML5 与其他区分开来。如果它支持 Canvas，那么您可以增强代码来检查与 Canvas 相关的 2D 和 3D 绘图属性。
check.getContext('2d') // 2D canvas rendering
check.getContext('webgl') or check.getContext('experimental-webgl') // For 3d Canvas Rendering
回顾一下，您可能在 Google Chrome 浏览器上玩过《愤怒的小鸟》。还记得吗……它是在 2D Canvas 上制作的，Chrome 大力支持 HTML5 及其规范……而高清版的《愤怒的小鸟》是用 3D 加速 Canvas 编写的。
注意：始终使用 Google Chrome/Chromium 或 Mozilla Firefox 的最新版本。请记住，WebGL 需要支持的显卡，该显卡还支持 OpenGL 功能，如 T&L、着色器、硬件渲染。但是，您可以使用 2D Canvas。但要使用 3D 需要显卡。在某些情况下，也支持软件渲染，您需要检查浏览器规范。请牢记这一点。它就像一个完整的 3D 游戏，需要一块显卡，由于 WebGL 在图形方面也做同样的事情，所以它也需要其中的一部分。
现在您知道如何首先检查功能了，现在让我们来绘制一些东西……在绘制之前，有些事情您需要先理解。事情总是有过程的……就像在制作煎蛋卷之前需要加热锅、加油、打鸡蛋，然后从中制作出一些东西……就像这样，绘制也有一些过程……您需要定义形状、它的边框、边框颜色、将填充图形、形状和大小的填充颜色，然后您需要绘制它。如果您牢记这些小步骤，您会发现图形编程容易得多。一旦您在任何地方定义了这些属性，您只需调用 draw() 即可将其渲染到屏幕上。这就是图形编程的全部内容。
让我们来做一些图形
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
(function ()
{
var check;
check = document.createElement('canvas');
if(check.getContext)
{
alert(" Canvas Not suppoted On your Browser ");
var element,context;
element = document.getElementById('canvas_draw');
context= element.getContext('2d');
// But first lets Define Some Colors
context.fillStyle="#FF02234";
// Lets draw some Rectangle using 2D canvas
context.fillRect(0,0,150,75); // where first 2 parameters stand for x,y and the next 2 are lenght and width
// Using RGB
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 55, 50);
// Using color Name
context.fillStyle = "red"
context.fillRect (10, 10, 55, 50);
}
else
{
alert(" Canvas Not suppoted On your Browser ");
}
} ) ();
</script>
</head>
<body>
<canvas id="canvas_draw" >
Canvas Not Supported
</canvas>
</body>
使用代码
将代码粘贴到任何记事本编辑器中。我通常使用 KOMODO IDE 进行开发。如果您在代码中遇到任何错误，请发送邮件至 siddmegadeth at gmail dot com。如果您喜欢，请告知我。我很快就会发布一篇关于 WebGL 的文章，向您展示如何绘制更多形状和大小。在下一篇文章中，我将介绍旋转、缩放、裁剪、绘制基本形状和用户自定义形状，并附带代码解释。今天的文章仅涵盖了 WebGL 及其用法的介绍。我很有信心您阅读得很愉快。期待您的反馈和回复。