Canvas

这个标签可以制定页面上的某个区域为画板，可以使用javascript来生成图片

 

绘制基本图形的用2d context就可以了，3d的也称为webGL，3d浏览器实现比较慢，而且某些系统由于没有所需要的驱动，即使安装了最新的浏览器也现实不了

 

至少需要指定width和height：

<canvas id=”drawing” width=”200” height=”200”>do not support</canvas>

 

和其他组建一样，这个元素也可以使用javascript接入，或者使用css添加样式

 

Some browsers create default HTML element objects for elements that aren’t officially part of HTML

var drawing = document.getElementById(“drawing”);

//make sure <canvas> is completely supported if (drawing.getContext){

var context = drawing.getContext(“2d”);

//more code here }

 

使用canvas创建的图像可以导出：

var drawing = document.getElementById(“drawing”);

//make sure <canvas> is completely supported if (drawing.getContext){

    //get data URI of the image

    var imgURI = drawing.toDataURL(“image/png”);

    //display the image

    var image = document.createElement(“img”);

    image.src = imgURI;

    document.body.appendChild(image);

 

}

 

The toDataURL() method throws an error if an image from a different domain is drawn onto a canvas

 

使用fill和stroke来绘制正方形：

var drawing = document.getElementById(“drawing”);

//make sure <canvas> is completely supported if (drawing.getContext){

var context = drawing.getContext(“2d”);

//draw a red rectangle

context.fillStyle = “#ff0000”;

context.fillRect(10, 10, 50, 50);

 

//draw a blue rectangle that’s semi-transparent

context.fillStyle = “rgba(0,0,255,0.5)”;

context.fillRect(30, 30, 50, 50);

 

}

 

使用stroke描边的不同之处：

The size of the stroke is controlled by the lineWidth property, which can be set to any whole number. Likewise, a lineCap property describes the shape that should be used at the end of lines (“butt”, “round”, or “square”) and lineJoin indicates how lines should be joined (“round”, “bevel”, or “miter”).

 

使用clearRect可以让指定部分透明：

 

//clear a rectangle that overlaps both of the previous rectangles

context.clearRect(40, 40, 10, 10);

 

绘制路径，可以绘制不同图形和线条，必须首先调用

beginPath：

- arc(x, y, radius, startAngle, endAngle, counterclockwise)— Draws an arc centered at point (x,y) with a given radius and between startAngle and endAngle (expressed in radians). The last argument is a Boolean indicating if the startAngle and endAngle should be calculated counterclockwise instead of clockwise.

- ➤  arcTo(x1, y1, x2, y2, radius)— Draws an arc from the last point to (x2,y2), passing through (x1,y1) with the given radius.

- ➤  bezierCurveTo(c1x, c1y, c2x, c2y, x, y)— Draws a curve from the last point to the point (x,y) using the control points (c1x,c1y) and (c2x,c2y).

- ➤  lineTo(x, y) — Draws a line from the last point to the point (x,y).

- ➤  moveTo(x, y) — Moves the drawing cursor to the point (x,y) without drawing a line.

- ➤  quadraticCurveTo(cx, cy, x, y)— Draws a quadratic curve from the last point to the point (x,y) using a control point of (cx,cy).

- ➤  rect(x, y, width, height) — Draws a rectangle at point (x,y) with the given width and height. This is different from strokeRect() and fillRect() in that it creates a path rather than a separate shape.

 

画一个时钟：

var drawing = document.getElementById(“drawing”);

//make sure <canvas> is completely supported if (drawing.getContext){

var context = drawing.getContext(“2d”);

    //start the path

    context.beginPath();

    //draw outer circle

context.arc(100, 100, 99, 0, 2 * Math.PI, false);

      //draw inner circle

      context.moveTo(194, 100);

      context.arc(100, 100, 94, 0, 2 * Math.PI, false);

      //draw minute hand

      context.moveTo(100, 100);

      context.lineTo(100, 15);

      //draw hour hand

      context.moveTo(100, 100);

      context.lineTo(35, 100);

      //stroke the path

      context.stroke();

}

 

检测某个坐标是否被绘制了：

if (context.isPointInPath(100, 100)){

alert(“Point (100, 100) is in the path.”);

}

 

可以绘制文字，fillText() and strokeText()，使用fill的话就会运用fillStyle里的样式定义：

 

context.font = “bold 14px Arial”; context.textAlign = “center”; context.textBaseline = “middle”; context.fillText(“12”, 100, 20);

 

textalign和textbaseline用来指定以文字的哪个位置作为中心点来绘制

 

转变，变形：

 

- rotate(angle)— Rotates the image around the origin by angle radians.

 

- ➤  scale(scaleX, scaleY)— Scales the image by a multiple of scaleX in the x dimension and by scaleY in the y dimension. The default value for both scaleX and scaleY is 1.0.

 

- ➤  translate(x, y)— Moves the origin to the point (x,y). After performing this operation, the coordinates (0,0) are located at the point previously described as (x,y).

 

- ➤  transform(m1_1, m1_2, m2_1, m2_2, dx, dy)— Changes the transformation matrix directly by multiplying by the matrix described as this:

 

- m1_1 m1_2 dx m2_1 m2_2 dy 001

 

➤ setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)— Resets the transformation matrix to its default state and then calls transform().

 

如果需要保存某个状态，以后返回的话：

context.save();

需要恢复到某个状态的话：

context.restore();

可以save多个状态，多次调用restore来返回

 

把图片画到canvas上：

var image = document.images[0]; context.drawImage(image, 10, 10);

drawimage方法还可以指定画出来图像的大小，以及选择图像哪些部分画出来

而且你可以把另一个canvas的内容画出来。这个方法画的内容也可以通过toDataURL方法来获取。但不允许把不同域的图片画出来。

 

同样画板也是支持渐变，阴影等，也可以把图片用pattern重复输出等

 

最强大的功能之一，可以获取图片数据，返回imagedata实例：

var imageData = context.getImageData(10, 5, 50, 50);

包含三个属性width, height, and data，其中data属性保存红绿蓝和透明数据：

var data = imageData.data, red = data[0],

green = data[1], blue = data[2], alpha = data[3];

这里获取的是第一个像素的颜色数据，0-255范围。

因此通过对这些数据的处理可以实现图片滤镜效果。var drawing = document.getElementById(“drawing”);

/make sure <canvas> is completely supported if (drawing.getContext){

var context = drawing.getContext(“2d”), image = document.images[0], imageData, data,

i, len, average,

red, green, blue, alpha;

//draw regular size context.drawImage(image, 0, 0);

//get the image data

imageData = context.getImageData(0, 0, image.width, image.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];

//get the average of rgb

average = Math.floor((red + green + blue) / 3);

//set the colors, leave alpha alone data[i] = average;

data[i+1] = average;

data[i+2] = average;

}

//assign back to image data and display imageData.data = data; context.putImageData(imageData, 0, 0);

 

gwww.html5rocks.com/en/tutorials/canvas/imagefilters/更多图片处理

 

注意的是，如果canvas已经dirty（例如试过加载其他域的图片到画板上），那么就无法读取图片数据，会导致错误。

 

有两个属性可以作用于画板上所有内容：

globalAlpha    设置全局透明度

globalCompositionOperation   用于指示新画的图形和旧的图形怎么层叠合并等https://developer.mozilla.org/ samples/canvas-tutorial/6_1_canvas_composite.html