html5中的canvas绘图属性

<canvas>标签是html5新增的专门用来绘制图像的元素，通过canvas技术可以在web中绘制各种图形。

canvas元素本身是一块无色透明的区域，只是一个容器，我们通过javascript脚本在区域上绘制图形。

一、添加canvas元素

<canvas width="300" height="300">
您的浏览器不支持canvas元素，请更新或更换您的浏览器
</canvas>

元素的宽和高未指定则默认为300,应该在标签内指定宽和高，在css中指定宽和高的话会产生一些错误的行为。当这两个值有任何一个改变时，在该画布上已经完成的任何绘图都会被擦掉。

二、通过canvas元素的getContext方法来创建Context对象，以获取允许进行绘制的2D环境。

var c=document.getElementById('myCanvas');
var context=c.getContext('2d');

三、在对象context上设置并且绘制图形

CanvasRenderingContext2D 对象的属性：

fillStyle 属性，用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象，通过使用指定的渐变或模式来完成填充。

font 属性，用来设置文本绘制时的文本的样式，大小和字体名称，格式为：[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称

italic 表示斜体；normal 表示正常、bold 粗体、bolder 更粗的字体、lighter 轻细的字体、100 ~ 900 之间的数字 600 及之后是加粗，之前不加粗

globalAlpha 属性，指定在画布上绘制的内容的不透明度。这个值的范围在 0.0(完全透明)和 1.0(完全不透明)之间。默认值为 1.0。

globalCompositeOperation 属性，指定颜色如何与画布上已有的颜色组合(合成)。这些值中的 "source" 一词，指的是将要绘制到画布上的颜色，而 "destination" 指的是画布上已经存在的颜色。默认值是 "source-over"。

"copy" 只绘制新图形，删除其他所有内容。

"darker" 在图形重叠的地方，颜色由两个颜色值相减后决定。

"destination-atop" 已有的内容只有在它和新的图形重叠的地方保留。新图形绘制于内容之后。

"destination-in" 在新图形以及已有画布重叠的地方，已有内容都保留。所有其他内容成为透明的。

"destination-out" 在已有内容和新图形不重叠的地方，已有内容保留。所有其他内容成为透明。

"destination-over" 新图形绘制于已有内容的后面。

"lighter" 在图形重叠的地方，颜色由两种颜色值的加值来决定。

"source-atop" 只有在新图形和已有内容重叠的地方，才绘制新图形。

"source-in" 在新图形以及已有内容重叠的地方，新图形才绘制。所有其他内容成为透明。

"source-out" 只有在和已有图形不重叠的地方，才绘制新图形。

"source-over" 新图形绘制于已有图形的顶部。这是默认的行为。

"xor" 在重叠和正常绘制的其他地方，图形都成为透明的。

lineCap 属性，指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。

"butt" 这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交，这条线段在其端点之外没有扩展。

"round" 这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。

"square" 这个值表示线段应该带有一个矩形线帽。这个值和 "butt" 一样，但是线段扩展了自己的宽度的一半。

lineJoin 属性，指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。

"miter"，说明了两条线段的外边缘一直扩展到它们相交。当两条线段以一个锐角相交，斜角连接可能变得很长。miterLimit 属性为一个斜面的长度设置了上限。超过这一限制，斜面就变成斜角了。

"round" 说明定点的外边缘应该和一个填充的弧接合，这个弧的直径等于线段的宽度。

"bevel" 值说明顶点的外边缘应该和一个填充的三角形相交。

lineWidth 属性，指定了画笔(绘制线条)操作的线条宽度。默认值是 1.0，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边有线条宽的一半。

miterLimit 属性，当宽线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候，所得的斜面可能相当长。当斜面太长，就会变得不协调。miterLimit 属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是 10，意味着一个斜面的长度不应该超过线条宽度的 10 倍。如果斜面达到这个长度，它就变成斜角了。当 lineJoin 为 "round" 或 "bevel" 的时候，这个属性无效。

shadowBlur 属性，指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

shadowColor 属性，把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

shadowOffsetX, shadowOffsetY 属性，指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

strokeStyle 属性，指定了用于画笔(绘制)路径的颜色、模式和渐变。这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

textAlign 属性，设置文本绘制时的文本对齐方式，可选值包括start、end、left、center、right

start表示如果文本是从左到右则左对齐，从右到左则右对齐

end表示如果文本是从左到右则右对齐，从右到左则左对齐