Html5 之 Canvas
标签:
不支持提示
相关接口:
//
interface CanvasRenderingContext2D {
readonly attribute HTMLCanvasElement canvas;
void save();
void restore();
void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);
attribute double globalAlpha; // (default 1.0)
attribute DOMString globalCompositeOperation; // (default source-over)
attribute any strokeStyle; // (default black)
attribute any fillStyle; // (default black)
CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);
CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);
CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);
attribute double lineWidth; // (default 1)
attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
attribute double miterLimit; // (default 10)
attribute double shadowOffsetX; // (default 0)
attribute double shadowOffsetY; // (default 0)
attribute double shadowBlur; // (default 0)
attribute DOMString shadowColor; // (default transparent black)
void clearRect(in double x, in double y, in double w, in double h);
void fillRect(in double x, in double y, in double w, in double h);
void strokeRect(in double x, in double y, in double w, in double h);
void beginPath();
void closePath();
void moveTo(in double x, in double y);
void lineTo(in double x, in double y);
void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);
void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);
void rect(in double x, in double y, in double w, in double h);
void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
void fill();
void stroke();
void clip();
boolean isPointInPath(in double x, in double y);
boolean drawFocusRing(in Element element, in double xCaret, in double yCaret, in optional boolean canDrawCustom);
attribute DOMString font; // (default 10px sans-serif)
attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);
void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);
TextMetrics measureText(in DOMString text);
void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
ImageData createImageData(in double sw, in double sh);
ImageData createImageData(in ImageData imagedata);
ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);
};
//
interface CanvasGradient {
void addColorStop(in double offset, in DOMString color);
};
//
interface CanvasPattern {
// opaque object
};
//
interface TextMetrics {
readonly attribute double width;
};
//
interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute CanvasPixelArray data;
};
//
interface CanvasPixelArray {
readonly attribute unsigned long length;
getter octet (in unsigned long index);
setter void (in unsigned long index, in octet value);
};
微软官方示例:
Rectangles: [双击代码可查看运行效果 - 用谷歌浏览器]
Arcs:
Quadratic:
Bezier:
Clipping:
600) index = 0;
index += 4;
draw(index);
}
function draw(x) {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 500);
ctx.save();
ctx.beginPath();
ctx.arc(x, x, 200, 0, Math.PI * 2, true);
ctx.clip();
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 400, 500);
drawSmiley();
ctx.restore();
}
function drawSmiley() {
ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(230, 130);
ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(170, 130);
ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 230);
ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(219, 298);
ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);
ctx.stroke();
}" _ue_custom_node_="true">
fillStyle:
= 25 && i = 50 && i = 75 && i
strokeStyle:
= 25 && i = 50 && i = 75 && i
Gradients:
Patterns:
lineWidth:
0; i--) {
ctx.strokeStyle = "black";
ctx.lineWidth = i;
ctx.beginPath();
ctx.moveTo(55, 20 + (20 - i) * 24);
ctx.lineTo(335, 20 + (20 - i) * 24);
ctx.stroke();
}" _ue_custom_node_="true">
lineCap:
lineJoin:
Shadows:
Text:
Image:
Video:
Rotate:
Scale:
setTransform:
Stroke transform:
Animation:
Mouse:
50) {
count = 0;
r = Math.floor(Math.random() * 255) + 70;
g = Math.floor(Math.random() * 255) + 70;
b = Math.floor(Math.random() * 255) + 70;
}
lastX = currentX;
lastY = currentY;
}" _ue_custom_node_="true">
火狐官方示例
moveTo example:
lineTo example:
arc example:
1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}" _ue_custom_node_="true">
quadraticCurveTo example:
globalAlpha example:
linearGradient example:
createRadialGradient example:
createPattern example:
shadowed text example:
save and restore canvas state example:
translate example:
20000) break; var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72)) var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72)) ctx.lineTo(x2, y2); x1 = x2; y1 = y2; i++; } while (x2 != R - O && y2 != 0); ctx.stroke(); }" _ue_custom_node_="true">
rotate example:
scale example:
20000) break; var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72)) var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72)) ctx.lineTo(x2, y2); x1 = x2; y1 = y2; i++; } while (x2 != R - O && y2 != 0); ctx.stroke(); }" _ue_custom_node_="true">
setTransform examples:
clip example:
谷歌的例子
arc:
clearpath:
gradient:
gradient2:
linewidth:
overflow:
quadraticcurve:
resizing:
saverestorepath:
stroke-scale-rotate:
stroke-should-not-close-path:
example1:
cvs.width || this.x cvs.height || this.y