ACD FotoCanvas(HTML5中的Canvas绘图研究)

超文本标记语言是一种使用标签来描述字体、大小、颜色和页面布局的语言，也是在互联网上写网页的主要语言。超文本标记语言的历史可以追溯到1990年代初。1993年，第一个非标准版本的超文本标记语言以互联网草案的形式发布，1999年，版本4.01发布。在这一时期，超文本标记语言发展迅速。然而，从那以后，超文本标记语言似乎没有发展起来，对网络标准的焦点已经转移到了可扩展标记语言和超文本标记语言上。为了适应互联网的发展，支持新的网络应用，克服现有的缺点，最新的HTML5标准应运而生，它不仅提高了网页的性能，还为交互、多媒体和本地化带来了强大的标签和应用编程接口。与对html 4相比，HTML5的语法已经改变，一些过时的标签已经被取消，并且提供了一些新的元素和属性。最重要的功能之一是添加本地数据库和其他网络应用程序功能，这将嵌入一个本地SQL数据库，以加快交互式搜索、缓存和索引操作。新添加的画布元素及其附带的画布应用编程接口可以在网页上绘制任何必要的美丽的图形和图像，从而使网页更加丰富多彩和赏心悦目。1画布如果您在页面上放置一个画布元素，这相当于放置一个“画布”，您可以在其中绘制图形。事实上，单个画布标签只能在页面上创建一个矩形区域。默认情况下，矩形区域宽300像素，高150像素，用户可以自定义大小。然后，必须使用JavaScript脚本控件来完成各种图形、线条、字符和复杂图形的转换操作，甚至添加高级动画。HTML5画布绘制不同于传统的基于SVG的矢量绘制技术，它是一种像素级的位图绘制技术，这意味着画布区域中的每个像素都可以被控制。另一个重要的特性是画布元素可以使用JavaScript直接绘制在网页上，而不需要任何第三方插件，这具有跨平台的固有优势，这与Flash、SVG和VML不同。2基本图形绘制无论绘制什么图形，都必须首先在页面上放置画布元素，即创建画布。代码如下：然后在页面上定义一个200像素* 200像素的不可见区域，当在浏览器中运行时是不可见的。如果需要显示，可以通过属性设置在该区域添加边框。代码是：画布的id设置为新的，这个元素可以在后续的绘图过程中通过id找到。然后，我们需要获得画布对图像的访问权限，定义一个上下文变量，并传入画布类型，这里是“2d”。具体代码如下：var canvas=document . getelementbyid(' new ')；var context=canvas . GetContext(' 2d ')；上述准备工作完成后，即可绘制基本图形。这里有两个简单的例子。2.1矩形绘图在绘图之前，必须先设置绘图样式，主要是对图形的颜色，但不限于图形颜色，如使用填充样式设置填充的颜色值，使用线条样式设置边框的颜色值，使用线条宽度指定图形边框的线条宽度；然后用填充矩形的方法和strokeRect方法填充矩形，画出矩形的边框。具体代码如下：上下文。fillstyle=' bluecontext.strokeStyle=' redcontext.lineWidth=' 1context.fillRect(10，10，180，150)；context.strokeRect(10，10，180，150)；在fillRect和strokeRect方法中，第一个“10”代表矩形起点的横坐标，第二个“10”代表起点的纵坐标，“180”代表矩形的长度，“150”代表矩形的高度。使用这四个参数，可以绘制矩形。运行结果如如图1所示。2.2圆画如果你想画一个圆，你需要用路径画出轮廓。您可以通过调用上下文对图像的beginPath()方法开始创建路径，然后通过arc()方法绘制圆或弧。

该方法定义如下：上下文。弧(x，y，半径，起始角，结束角，逆时针)，其中(x，y)是中心坐标，半径是圆半径，起始角和结束角是初始角和结束角，它们的值以弧度表示，通常用数学来写。圆周率的意思是180，所以数学逆时针表示它是否顺时针显示，这是一个布尔参数值。当参数值为真时，顺时针绘制；当参数值为假时，逆时针绘制。画完图后，你应该关闭路径。如果圆需要填充颜色，可以通过fillStyle属性进行设置。具体代码如下：

context . BeginPath()；上下文。弧(200，200，100，0，数学。* 2，真)；context . ClosePath()；context.fillStyle=' redcontext.fill()。context . stroke()；运行结果显示在如图2。图1矩形绘图3五星红旗绘图画布元素主要使用JavaScript脚本动态渲染图像，使用简单但功能强大。大多数浏览器支持2D画布环境，火狐也可以通过插件支持3D画布，它也可以在工业工程中使用。