标签：
canvas跟其它标签一样，也可以定义样式，但需要注意的是：canvas的默认宽高为300px* 150px，在css中为canvas定义宽高，实际上定义的是canvas的显示的大小，但针对canvas来说还包括里面的绘制的图像的分辨率的大小。所以在css中定义高宽canvas中绘制的图形可能会变形。因此，我们可以使用以下方式指定大小：
// 在标签中指定
<canvas class="mycanvas" width="500" height="500">土鳖！你的浏览器out啦！</canvas>
// -->标签中的内容是当浏览器不支持canvas时的后备信息。
// 在js中通过画布对象属性的方式指定
var drawing = document.querySelector(‘.mycanvas‘);
drawing.width = 500;
drawing.height = 500;
canvas对象的属性和方法：
canvas中的绘图是一种基于状态的绘图，也就是说我们需要先设置绘图的状态，在调用函数做一个具体的绘制。
要在画布上绘图，首先要先获取绘图上下文，取得绘图上下文对象的引用。调用getContext()方法，传入上下文的名字。如下：
var drawing = document.querySelector(‘.mycanvas‘);
// 检测浏览器是否支持<canvas>
if(drawing.getContext) {
var context = drawing.getContext(‘2d‘); //获取绘图上下文
}
if(drawing.getContext(‘2d‘)) {} // 不能这样写，这样写不支持canvas的浏览器会报错！！！
检测getContext()方法是否存在这一步很有必要。因为有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象，并且可以引用它，但这个对象并没有getContext()方法。
使用toDataURL()方法，可以导出在< canvas >元素上绘制的图像。这个参数接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。默认情况下，浏览器会将图像编码为 PNG 格式（除非另行指定）。Firefox 和 Opera 也支持基于”image/jpeg” 参数的 JPEG 编码格式。
var drawing = document.querySelector(‘.mycanvas‘);
if(drawing.getContext) {
// 获取图像的数据URL
var imgURL = drawing.toDataURL(‘image/png‘);
// 显示图像
var image = document.createElement(‘img‘);
image.src = imgURL;
document.body.appendChild(image);
}
如果绘制到画布上的图像源自不同的域， toDataURL() 方法会抛出错误。
矩形是唯一一种可以直接在2D上下文中绘制的形状。
strokeRect(x, y, width, height); 绘制指定颜色的描边矩形，描边颜色通过strokeStyle属性指定。
clearRect(x, y, width, height); 清除画布上的指定区域。
参数单位都是像素。
var drawing = document.querySelector(‘#mycanvas‘);
if(drawing.getContext) {
var context = drawing.getContext(‘2d‘);
context.fillStyle = ‘red‘;
context.fillRect(10, 10, 100,100);
context.strokeStyle = ‘green‘;
context.strokeRect(60, 60, 100, 100);
context.clearRect(70, 70, 30, 30);
}
创建路径：
- beginPath(); 开辟新的路径
- closePath()； 闭合路径
lineTo(x, y); 从上一点开始绘制一条直线，直到(x, y)为止。
rect(x, y, width, height); 绘制矩形路径
arc(x, y, radius, startAngle, endAngle, counterclockwise); 绘制弧线。 (圆心x, 圆心y, 半径, 开始角度, 结束角度, 是否按逆时针方向计算)
绘制图形：
clip(); 创建一个剪切区域
isPointInPath(x, y);用于在路径被关闭之前确定画布上的某一点是否位于路径上
strokeText(str, x, y, maxWidth); 绘制描边文本
font; 文本样式、大小及字体
由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2D上下文提供了辅助确定文本大小的方法measureText(str); 返回TextMetrice对象。返回的对象目前只有一个width属性，但将来还会增加更多度量属性。
var fontSize = 100;
context.font = fontSize + ‘px Arial‘;
while(context.measureText(‘Hello world!‘).width > 140) {
fontSize--;
context.font = fontSize + ‘px Arial‘;
}
context.fillText(‘Hello world!‘, 100, 100);
context.fillText(‘Font size is ‘ + fontSize + ‘px‘, 100, 120);
fillText()和strokeText()方法都可以接受第四个参数(maxWidth)，也就是文本的最大像素宽度。提供的这个参数后，如果传入的字符串大于最大宽度，则绘制的文本字符的高度正确，但宽度会收缩以适应最大宽度。不过，这个可选的参数尚未得到所有浏览器支持。
为绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy); 将变换矩阵重置为默认状态，然后在调用transform()。
save(); 保存当前上下文状态。 注意：save()方法保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。
根据期望的最终结果不同，调用这个方法时，可以使用三种不同的参数组合。
1、传入一个HTML< img >元素，以及绘制该图像的起点(x，y坐标)。如下：
// 取得图像
var img = document.images[0];
// 将图像绘制到上下文中
context.drawImage(img, 100, 100);
绘制到画布上的图像与原始大小一样。
2、绘制指定大小的图像。如果想要改变绘制后的图像的大小，可以再多穿如两个参数，分别表示目标宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。如下：
var img = document.images[0];
context.drawImage(img, 100, 100, 30, 30); // 绘制大小为30*30的图像
3、将图像中的某个区域绘制到上下文中。
drawImage()方法的这种调用方式总共需要出入9个参数：
(img, 源图像x, 源图像y, 源图像width, 源图像height, 目标图像x, 目标图像y, 目标图像width, 目标图像height)。
context.drawImage(img, 500, 0, 500, 500, 0, 0, 500, 500);
原始图像的起点为(500, 0),宽和高都是500px。最终绘制到上下文中的图像的起点是(0, 0),而大小变成了500*500px
除了给drawImage()方法传入HTML< img >元素外，还可以传入另一个< canvas >元素作为其第一个参数。这样就可以把另一个画布内容会知道当前画布上。
结合使用drawImage()和其他方法，可以对图像进行各种基本操作。操作结果可以通过toDataURL()方法获得。不过，图像不能来自其他域。如果图像来自其他域，调用toDataURL()会抛出一个错误。例如，位于www.aaa.com上的页面绘制的图像来自于www,bbb,com，当前上下文就会被认为’不干净’，因而会抛出错误。[注意：toDataURL()是< canvas >对象的方法，而不是上下文对象的方法。]
这些属性都可以通过context对象修改。只要在绘制之前为它们设置适当的值，就能自动产生阴影。
不同浏览器对阴影的支持有一些差异。
渐变有CanvasGradient实例演示，创建一个新的线性渐变，可以调用createLinearGradient()方法。 调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient对象的实例。创建渐变对象后，下一步就是使用addColorStop()方法来指定色标【色标位置是一个0（开始的颜色）到1（结束的颜色）之间的位数字】。然后把fillStyle或strokeStyle设置为这个对象，从而使用渐变来绘制或描边。
// 1、创建渐变对象
var gradient = context.createLinearGradient(110, 110, 310, 310);
// 2、指定色标
gradient.addColorStop(0, ‘red‘);
gradient.addColorStop(0.5, ‘yellow‘);
gradient.addColorStop(1, ‘blue‘);
// 3、将渐变对象赋给fillStyle或strokeStyle
context.fillStyle = gradient;
context.fillRect(110, 110, 200, 200);
createLinearGradient()基于起点的x, y坐标以及宽度和高度值创建渐变对象，因此我们可以在fillRect()中使用相同的坐标(起点x, 起点y)。如下：
function createLinearGradient(context, x, y, width, height) {
return context.createLinearGradient(x, y, x + width, y + height);
}
var gradient = createLinearGradient(context, 110, 110, 200, 200);
gradient.addColorStop(0, ‘red‘);
gradient.addColorStop(0.5, ‘yellow‘);
gradient.addColorStop(1, ‘blue‘);
context.fillStyle = gradient;
context.fillRect(110, 110, 200, 200);
径向渐变： 可以把径向渐变想象成一个长圆桶，而createRadialGradient()方法的这6个参数定义的就是这个桶的原型开口的位置。
模式其实就是重复的图像，可以用来填充或描边图形。
- createPattern(img, str)方法。接收2个参数：一个HTML< img >元素和一个表示如何重复图像的字符串（与CSS的background-repeat属性值相同）。
var img = document.images[0];
pattern = context.createPattern(img, ‘repeat‘);
// context.fillStyle = pattern;
// context.fillRect(100, 100, 300, 300);
context.strokeStyle = pattern;
context.lineWidth = 20;
context.strokeRect(100, 100, 300, 300);
模式与渐变一样，都是从画布的原点(0, 0)开始的。将填充样式(fillStyle)设置为模式对象，只表示在某个特性的区域显示重复的图像，而不是要从某个位置开始绘制重复的图像。
2D上下文的一个明显的长处就是，可以通过getImageData()取得原始图像数据。这个方法接受4各参数：要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度。
var imgData = context.getImageData(10, 5, 50, 50);
这里返回的对象是ImageData的实例。每个ImageData对象都有三个属性：width、height和data。其中data属性是一个数组，保存着图像总每一个像素的数据。在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度值。因此，第一个像素的数据就保存在数组的第0到第3个元素中。
通过修改图像数据，可以像下面这样创建一个简单的灰阶过滤器。如下：
if(drawing.getContext) {
var context = drawing.getContext(‘2d‘);
var img = document.images[0];
var imageData, data, i, len, average, red, green, blue, alpha;
// 绘制原始图像
context.drawImage(img, 0, 0);
// 取得图像数据
imageData = context.getImageData(0, 0, img.width, img.height);
data = imageData.data;
for(i = 0,len = data.length; i < len; i+=4) {
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
// 求得rgb平均值
average = Math.floor((red + green + blue) /3 + 10);
// 设置颜色值，透明度不变
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
// 回写图像数据并显示结果
imageData.data = data;
context.putImageData(imageData, 0, 0);
}
通过操作原始像素值不仅能实现灰阶过滤，还能实现其他功能。
WebGL是针对Canvas的3D上下文。与其他Web技术不同，WebGL并不是W3C制定的标准，而是有Khronos Group制定的。
Khtonos Group也设计了其他图形处理API，比如OpenGL ES 2.0。
…此处省略…
canvas属性； 返回当前绘图上下文对象所属的canvas对象
标签：
原文地址：http://blog.csdn.net/ling201509/article/details/51719712
