HTML5画布简介:第1部分:
大家好，这是我第一次在这里onnbsp; CodeProjectnbsp;我很高兴提出本文对HTML5 LT; canvasgt;元素。正如你可能知道，，它是在下一波的进展提供本地支持HTML5的第一步。所以，让我们开始探索LT; canvasgt;元素HTML5的最强大的元素。介绍
{A}规范定义的LT; canvasgt;？？"的决议依赖图的画布可以用于渲染图形，游戏图形，或其他视觉图像动态元素的画布是一个矩形您的网页，在那里你可以使用JavaScript来绘制任何你想要的。默认情况下，1公升; canvasgt;元素没有内容，没有自己的边界。你可以定义一个简单的LT;这个最小的HTML元素; canvasgt。

<canvas id="mycanvas" width="300" height="225"></canvas>

这里的高度和宽度指定画布大小和被指定为ID在你的JavaScript代码访问它。和任何标签之间，将被视为备用内容，如果LT; canvasgt;元素不是由浏览器的支持。
除了这些属性外，它也支持两种功能，具体到这个元素，getContext的和toDataURLgetContext的（）
这个功能是所有的东西，你可以画上LT网关; canvasgt。每个画布上有图纸的情况下，这是发生的所有有趣的东西。一旦你找到1公升; canvasgt DOM元素（通过使用document.getElementById（）或任何其他你喜欢的方式），您拨打的getContext（）方法。目前，只有quot; 2dquot;上下文支持，根据{A2的}也有quot; webglquot;上下文，但它尚未支持许多浏览器，虽然它可能会在未来修订的规格支持。因此得到上下文，你会传递一个字符串quot; 2dquot;作为参数，将返回一个新的CanvasRenderingContext2D对象，可以用来画上LT方法; canvasgt。toDataURL（）
这种方法，不带参数调用时，返回一个数据:URL（图像文件，还可以通过此功能的任何有效的MIME类型的字符串表示，在该格式的数据，如quot;形象。 / pngquot，"图像/ jpegquot;画布上绘制模型
想象一下，你画在墨迹图片。你不想只是潜水，并开始用墨水绘制，因为你可能犯了一个错误。相反，你绘制的线条和曲线用铅笔，一旦你高兴，你在你的墨水素描跟踪。
每个画布上有一个路径。定义的路径，就像是用铅笔画。你可以画任何你喜欢的，但它不会是成品的一部分，直到你拿起羽毛笔和墨水在你的路径跟踪。
在画布上，几乎所有的绘图方法，你打电话会添加一个路径（除fillRect（）和fillText（）方法，它描绘了一个充满形状即刻），不会画，直到你调用{A4纸}和剪辑（）方法创建一个路径的裁剪区域。例子
现在让我们来探讨如何使用LT; canvasgt;元素，并开始在画布上绘制的方法。对于这个例子，我们会制订一些简单的形状，使用Context对象的一些方法（所有方法，请参阅方法和属性）。定义一个LT; canvasgt;
定义一个LT; canvasgt以下简单的标记:{C}
{S0的}
以上是简单的LT; canvasgt，NBSP，我已经给它的边界，所以你可以看到它。获得上下文
下一步，我们将通过以下几行JavaScript的绘图上下文。

var canvas = document.getElementById("mycanvas");

var context = canvas.getContext("2d");

让LT; canvasgt上绘制;！！
我们将绘制一个正方形，一个圆圈，并在LT上的一些文字; canvasgt，为此，我们将使用下面的方法（所有方法，请参阅方法和属性）:fillRect（X，Y​​，fWidth，fHeight）:
描绘了到CanvasRenderingContext2D对象的矩形使用当前填充样式。beginPath方法（）:
将当前路径。弧（X，Y，半径，startAngle，endAngle bAnticlockwise）:
点添加到路径表示弧（角度弧度）。填写（）:
使用当前填充样式填充子路径。fillText（文字，X，Y，maxWidth]）:
在画布上用当前的填充样式和字体渲染填充文本。 （maxWidth是可选的。它指定了最大可能的文本的宽度。如果该值小于width属性，文字进行缩放以适合。）{A5的}:
这是一个属性设置将用于填补形状的风格。它可以是一个{A6的。
通过上述方法，我们可以编写下面的JavaScript代码LT; canvasgt上绘制;{体C3}
让我解释一下线，由线，在thenbsp;第二行，我们设置为蓝色RGB（）字符串FillStyle属性。然后我们绘制一个填充的矩形（10,10）（X，Y）与50像素的宽度和高度cordinates，从而使它成为一个正方形。在第四行，我们开始创建一个圆的路径，然后在下一行，我们定义圆与弧（）函数，传递给它的坐标（200,35）（X，Y）为圆心， 25px半径，然后开始的0deg和结束角度为360度角，从而完成一个圆的完整路径。由于此功能需要在quot角; Radiansquot;默认情况下，提请顺时针方向的角度，我已经在thenbsp定义的一个小功能;第一线，acDegToRad（），它通过在弧度值转换然后否定的结果，使度逆时针（因为我们被教导在学校做:)。然后在第六行，我们调用fill（）方法实际绘制和填充路径，这是一个圆圈在这种情况下。最后一行简单地绘制在字符串（100,80）（X，Y）坐标。默认情况下，quot; fontquot 2D背景是10px无衬线。你可以通过{A7的}属性作为字符串设置任何CSS字体
在这里得到绘制的形状:
{S}
下面是另一个具有标志相当复杂的图形} {A8的画布上，我最喜爱的游戏:)之一。在我的下一个职位，我们将下潜深度在LT的其他职能; canvasgt;我就给了如何利用这个很好的PORTAL2标志的演练。
{S2的}方法和属性
截至目前，CanvasRenderingContext2D对象只包含49的方法和属性。 MSDN有一个很好的{A9的}。下面是每一个简短的描述:财产描述{A10的}获取一个{A11}对象，目前的情况下，来自回参考。{A12}获取或设置当前样式用来填充形状。{A13号}获取或设置当前字体为背景。{A14高速公路}取得或设定目前的alpha透明度值，适用于全球复合渲染操作。{A15}获取或设置一个值，表示源图像到目标图像的绘制。{A16}获取或设置当前线帽样式。{A17中} 获取或设置类型的角落，当两条线相遇。{A18}获取或设置当前线宽，以像素为单位。{A19中}获取或设置所允许的最大{A18}值的一半和斜切长度之间的比例。{A21号}获取或设置被应用到阴影模糊的当前水平。{A22号}获取或设置要使用的颜色阴影。{A23} 获取或设置一个阴影从一个形状的水平距离。{A24的}获取或设置一个阴影从一个形状的垂直距离。{A25}获取或设置当前的风格，用笔画形状。{A26}获取或设置当前的锚点或在目前情况下的文本对齐设置。{A27高速公路}获取或设置当前的设置字体的基线对齐。
方法描述{A28}添加点代表一个弧形的路径。{A29}绘制的两个定义在当前点的路径和另外两个点的切线之间的固定半径的圆弧。{A30的}重置当前路径。{A31号}添加一个指向当前子路径使用指定的代表三次Bézier曲线的控制点。第A32}清除CanvasRenderingContext2D在一个给定的矩形对象上的像素。{第A33}指定一个新的裁剪区域。{A34高速公路}关闭当前子路径和启动一个新的子路径，有一个起点，等于封闭的子路径的结束。{A35号}返回{A36} CSS像素尺寸的对象。{A37}创建一个对象，表示在画布中使用线性渐变。{A38}返回{病态}对象重复指定的元素，在指定的方向。{的A40}返回一个对象，它表示在一个画布中使用径向或圆形的梯度。{A41} 在画布上绘制指定的图像。{A42高速公路}使用当前填充样式填充子路径。{A43号}描绘了到CanvasRenderingContext2D对象的使用目前的{A44}矩形。{A45高速公路}渲染填充文本到画布上，通过使用当前填充样式和字体。{A46公路}返回{A47公路}对象，表示在画布上的指定矩形的像素数据。{A48}确定是否在当前路径中指定的点。{A49}增加了一个新的子路径和子路径用一条直线的最后一点，点连接。{A50的}返回{A51}对象，其中包含指定文本的宽度。 {的A52}通过使用指定的点创建一个新的子路径。{A53}油漆的数据到画布从指定CanvasImageData对象的。{A54}添加一个指向当前子路径使用指定的二次贝塞尔曲线的控制点。{A55高速公路}创建一个新的封闭矩形子路径。{A56}返回以前保存CanvasRenderingContext2D路径状态和属性。{的A57}旋转当前上下文的坐标（即转换矩阵）。{A58}保存当前上下文的状态。{A59}秤当前上下文由指定的水平（x）和垂直（y）因素。{A60}重置回其默认当前上下文的当前变换矩阵，然后乘以指定的矩阵。{A61}呈现当前子路径的笔触，通过使用当前描边样式。{A62}创建在画布上的指定矩形的轮廓，使用目前的中风，线条宽度，加入风格。{A63}通过使用当前字体和{A25}属性，呈现指定的文本在指定的位置。{A65}修改当前上下文的转换​​矩阵。{A66}指定值在画布上移动原点。
{A67}|社会报德拉谢卡尔:4320844 |会员