标签:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">不支持提示</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: [双击代码可查看运行效果 - 用谷歌浏览器]
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillRect(50, 20, 145, 145);
ctx.fillStyle = "rgb(0, 162, 232)";
ctx.fillRect(135, 85, 125, 125);
ctx.lineWidth = 5;
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.strokeRect(50, 335, 145, 145);
ctx.strokeStyle = "rgb(0, 162, 232)";
ctx.strokeRect(135, 275, 125, 125);
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.fillRect(210, 180, 125, 125);
</script>
</body>
</html>
Arcs:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "rgb(0 ,0 ,0)";
ctx.arc(123, 93, 80, 0, 2 * Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgb(0, 162, 232)";
ctx.arc(198, 158, 70, 0, 2 * Math.PI, true);
ctx.fill();
ctx.lineWidth = 5;
ctx.beginPath();
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.arc(123, 408, 80, 0, 1.5 * Math.PI, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "rgb(0, 162, 232)";
ctx.arc(198, 328, 70, 0, 0.5 * Math.PI, true);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.arc(273, 243, 70, 0, 2 * Math.PI, true);
ctx.fill();
</script>
</body>
</html>
Quadratic:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.moveTo(194, 104);
ctx.quadraticCurveTo(54, 104, 54, 246);
ctx.quadraticCurveTo(54, 371, 194, 371);
ctx.quadraticCurveTo(324, 371, 338, 272);
ctx.lineTo(240, 272);
ctx.arc(197, 272, 47, 0, Math.PI, false);
ctx.lineTo(150, 256);
ctx.lineTo(338, 256);
ctx.quadraticCurveTo(338, 104, 194, 104);
ctx.moveTo(154, 207);
ctx.fillStyle = "rgb(9, 126, 196)";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.lineTo(240, 211);
ctx.arc(197, 211, 47, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
Bezier:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
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();
</script>
</body>
</html>
Clipping:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var index = 0;
timer1 = setInterval(renderLoop, 16);
function renderLoop() {
if (index > 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();
}
</script>
</body>
</html>
fillStyle:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var a = 1;
for (j = 0; j < 100; j++) {
var r = 255, g = 0, b = 0;
for (i = 0; i < 150; i++) {
if (i < 25) g += 10.2;
else if (i >= 25 && i < 50) r -= 10.2;
else if (i >= 50 && i < 75) {
g -= 10.2;
b += 10.2;
}
else if (i >= 75 && i < 100) r += 10.2;
else b -= 10.2;
ctx.fillStyle = "rgba(" + Math.floor(r) + "," +
Math.floor(g) + "," +
Math.floor(b) + "," + a + ")";
ctx.fillRect(3 * i, 5 * j, 3, 5);
}
a -= 0.01;
}
</script>
</body>
</html>
strokeStyle:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var a = 1;
for (j = 0; j < 100; j++) {
var r = 255, g = 0, b = 0;
for (i = 0; i < 150; i++) {
if (i < 25) g += 10.2;
else if (i >= 25 && i < 50) r -= 10.2;
else if (i >= 50 && i < 75) {
g -= 10.2;
b += 10.2;
}
else if (i >= 75 && i < 100) r += 10.2;
else b -= 10.2;
ctx.strokeStyle = "rgba(" + Math.floor(r) + "," +
Math.floor(g) + "," +
Math.floor(b) + "," + a + ")";
ctx.strokeRect(3 * i, 5 * j, 3, 5);
}
a -= 0.01;
}
</script>
</body>
</html>
Gradients:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var gradient1 = ctx.createLinearGradient(0, 0, 0, 500);
gradient1.addColorStop(0, "#00ABEB");
gradient1.addColorStop(1, "white");
var gradient2 = ctx.createLinearGradient(0, 25, 0, 450);
gradient2.addColorStop(0, "red");
gradient2.addColorStop(0.4, "white");
gradient2.addColorStop(1, "red");
var gradient3 = ctx.createRadialGradient(0, 0, 50, 0, 0, 100);
gradient3.addColorStop(0, "#F4F201");
gradient3.addColorStop(0.8, "#E4C700");
gradient3.addColorStop(1, "rgba(228,199,0,0)");
var gradient4 = ctx.createRadialGradient(250, 1, 1, 250, 1, 225);
gradient4.addColorStop(0, "white");
gradient4.addColorStop(1, "gray");
ctx.fillStyle = gradient1;
ctx.fillRect(0, 0, 400, 500);
ctx.fillStyle = gradient3;
ctx.fillRect(0, 0, 100, 100);
ctx.fillStyle = gradient4;
ctx.beginPath();
ctx.arc(310, 50, 25, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.arc(340, 50, 30, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.arc(370, 50, 25, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(50, 200);
ctx.lineTo(200, 450);
ctx.lineTo(350, 200);
ctx.lineTo(200, 25);
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fill();
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(200, 200);
ctx.lineTo(350, 200);
ctx.fillStyle = gradient2;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 450);
ctx.fillStyle = gradient2;
ctx.fill();
ctx.stroke();
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(200, 450);
ctx.bezierCurveTo(75, 460, 155, 350, 36, 290);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(8, 290);
ctx.lineTo(62, 290);
ctx.lineTo(58, 270);
ctx.lineTo(12, 310);
ctx.lineTo(8, 290);
ctx.fillStyle = gradient2;
ctx.fill();
ctx.stroke();
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(50, 200);
ctx.lineTo(200, 450);
ctx.lineTo(350, 200);
ctx.lineTo(200, 25);
ctx.stroke();
</script>
</body>
</html>
Patterns:
<!doctype html>
<html>
<body>
<img id="ie_small" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie_small.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var image = document.getElementById("ie_small");
var pattern = ctx.createPattern(image, "repeat");
ctx.fillStyle = pattern;
drawClearCenteredE();
function drawClearCenteredE() {
ctx.beginPath();
ctx.moveTo(194, 104);
ctx.quadraticCurveTo(54, 104, 54, 246);
ctx.quadraticCurveTo(54, 371, 194, 371);
ctx.quadraticCurveTo(324, 371, 338, 272);
ctx.lineTo(240, 272);
ctx.arc(197, 272, 47, 0, Math.PI, false);
ctx.lineTo(150, 256);
ctx.lineTo(338, 256);
ctx.quadraticCurveTo(338, 104, 194, 104);
ctx.moveTo(154, 207);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.lineTo(240, 211);
ctx.arc(197, 211, 47, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>
lineWidth:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
for (i = 20; i > 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();
}
</script>
</body>
</html>
lineCap:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = '24px "Segoe UI"';
var styles = ["round", "square", "butt"];
for (i = 0; i < styles.length; i++) {
ctx.fillStyle = "rgb(0, 89, 187)";
ctx.fillText(styles[i], 10, 75 + i * 125);
ctx.strokeStyle = "black";
ctx.lineWidth = 50;
ctx.lineCap = styles[i];
ctx.beginPath();
ctx.moveTo(125, 125 + i * 125);
ctx.lineTo(350, 125 + i * 125);
ctx.stroke();
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(60, 125 + i * 125);
ctx.lineTo(390, 125 + i * 125);
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(125, 75);
ctx.lineTo(125, 425);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(350, 75);
ctx.lineTo(350, 425);
ctx.stroke();
</script>
</body>
</html>
lineJoin:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = '24px "Segoe UI"';
var styles = ["bevel", "round", "miter"];
for (i = 0; i < styles.length; i++) {
ctx.fillStyle = "rgb(0, 89, 187)";
ctx.fillText(styles[i], 40, 50 + i * 150);
ctx.lineJoin = styles[i];
ctx.lineWidth = 75;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(155, 90 + i * 150);
ctx.lineTo(225, 90 + i * 150);
ctx.lineTo(225, 150 + i * 150);
ctx.stroke();
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(100, 90 + i * 150);
ctx.lineTo(300, 90 + i * 150);
ctx.stroke();
}
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(155, 30);
ctx.lineTo(155, 470);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(225, 30);
ctx.lineTo(225, 470);
ctx.stroke();
</script>
</body>
</html>
Shadows:
<!doctype html>
<html>
<body>
<img id="ie" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0, 0, 0, 1)";
ctx.fillStyle = "black";
ctx.font = "72px Segoe UI";
ctx.fillText("Canvas", 90, 60);
var image = document.getElementById("ie");
ctx.drawImage(image, 70, 70, 250, 250);
var gradient = ctx.createLinearGradient(0, 0, 250, 0);
gradient.addColorStop(0, "#0080FF");
gradient.addColorStop(1, "#FFFFFF");
ctx.fillStyle = gradient;
ctx.fillRect(25, 330, 340, 20);
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 0.25)";
ctx.arc(50, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 0.5)";
ctx.arc(150, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 0.75)";
ctx.arc(250, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 1)";
ctx.arc(350, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
</script>
</body>
</html>
Text:
<!doctype html>
<html>
<body>
<img id="ie_small" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie_small.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.fillText("IE9 supports HTML5 Canvas", 0, 0);
ctx.font = '24px "Segoe UI"';
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillText("IE9 supports HTML5 Canvas", 0, 30);
ctx.save();
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 1)";
ctx.font = '72px "Segoe UI" bold';
ctx.strokeText("IE9 supports HTML5 Canvas", 0, 70);
var gradient = ctx.createLinearGradient(0, 160, 0, 300);
gradient.addColorStop(0, "#0080FF");
gradient.addColorStop(1, "#FFFFFF");
ctx.fillStyle = gradient;
ctx.font = '127px "Segoe UI" bold';
ctx.fillText("IE9 supports HTML5 Canvas", 0, 160);
ctx.strokeText("IE9 supports HTML5 Canvas", 0, 160);
ctx.restore();
var image = document.getElementById("ie_small");
var pattern = ctx.createPattern(image, "repeat");
ctx.fillStyle = pattern;
ctx.font = '254px "Segoe UI" bold';
ctx.fillText("IE9 supports HTML5 Canvas", 0, 275);
ctx.strokeText("IE9 supports HTML5 Canvas", 0, 275);
</script>
</body>
</html>
Image:
<!doctype html>
<html>
<body>
<img id="ie" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var image = document.getElementById("ie");
ctx.drawImage(image, -10, 45, 400, 400);
</script>
</body>
</html>
Video:
<!doctype html>
<html>
<body>
<video id="video" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/fish.mp4" width="640" height="360" loop style="display: none"></video>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
timer1 = setInterval(drawVideo, 16);
function drawVideo() {
if (!isNaN(video.duration)) {
video.play();
ctx.drawImage(video, 0, 0, 400, 500);
}
}
</script>
</body>
</html>
Rotate:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.translate(200, 250);
for (i = 0; i < 10; i++) {
ctx.rotate(0.2 * Math.PI);
ctx.fillStyle = "rgba(0, 128, 255, 0.5)";
ctx.fillRect(10, 0, 150, 50);
}
</script>
</body>
</html>
Scale:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.lineWidth = 2;
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.arc(80, 80, 70, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.translate(75, 100);
ctx.scale(2, 2);
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.arc(80, 80, 70, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
setTransform:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.translate(200, 250);
var x = 6;
var sine = Math.sin(1 / (x - 1) * Math.PI);
var cose = Math.cos(1 / x * Math.PI);
for (i = 0; i <= 2 * x; i++) {
var color = 255 / (2 * x) * i;
ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ", 0.9)";
drawClearE();
ctx.transform(cose, sine, -sine, cose, 0, 0);
}
function drawClearE() {
ctx.save();
ctx.beginPath();
ctx.moveTo(70, 0);
ctx.quadraticCurveTo(0, 0, 0, 71);
ctx.quadraticCurveTo(0, 133.5, 70, 133.5);
ctx.quadraticCurveTo(135, 133.5, 142, 84);
ctx.lineTo(93, 84);
ctx.arc(71.5, 84, 21.5, 0, Math.PI, false);
ctx.lineTo(50, 76);
ctx.lineTo(142, 76);
ctx.quadraticCurveTo(142, 0, 70, 0);
ctx.moveTo(50, 53.5);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "white";
ctx.lineTo(93, 53.5);
ctx.arc(71.5, 53.5, 21.5, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();
}
</script>
</body>
</html>
Stroke transform:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(145, 225, 50, 0, Math.PI, true);
ctx.moveTo(95, 225);
ctx.lineTo(195, 330);
ctx.setTransform(1, 4, 0, 1, 0, 0);
ctx.stroke();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.beginPath();
ctx.arc(245, 225, 50, 0, Math.PI, true);
ctx.moveTo(295, 225);
ctx.lineTo(195, 330);
ctx.setTransform(1, -4, 0, 1, 0, 0);
ctx.stroke();
</script>
</body>
</html>
Animation:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var WIDTH = cvs.width;
var HEIGHT = cvs.height;
var lastX = WIDTH * Math.random();
var lastY = HEIGHT * Math.random();
function line() {
ctx.save();
ctx.translate(WIDTH / 2, HEIGHT / 2);
ctx.scale(0.9, 0.9);
ctx.translate(-WIDTH / 2, -HEIGHT / 2);
ctx.beginPath();
ctx.lineWidth = 5 + Math.random() * 10;
ctx.moveTo(lastX, lastY);
lastX = WIDTH * Math.random();
lastY = HEIGHT * Math.random();
ctx.bezierCurveTo(WIDTH * Math.random(),
HEIGHT * Math.random(),
WIDTH * Math.random(),
HEIGHT * Math.random(),
lastX, lastY);
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
var s = 'rgba(' + r + ',' + g + ',' + b + ', 1.0)';
ctx.shadowColor = 'white';
ctx.shadowBlur = 10;
ctx.strokeStyle = s;
ctx.stroke();
ctx.restore();
}
timer1 = setInterval(line, 50);
function blank() {
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
}
timer2 = setInterval(blank, 40);
</script>
</body>
</html>
Mouse:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var WIDTH = cvs.width;
var HEIGHT = cvs.height;
var currentX = 0, currentY = 0;
function OnMouseMove(e) {
if (typeof e == 'undefined') e = canvas1.event;
if (typeof e.offsetX != 'undefined' && typeof e.offsetY != 'undefined') {
currentX = e.offsetX;
currentY = e.offsetY;
}
else {
var relPos = getRelativePos(e.clientX, e.clientY);
currentX = relPos[0];
currentY = relPos[1];
}
}
if (cvs.addEventListener) cvs.addEventListener("mousemove", OnMouseMove, false);
else if (cvs.attachEvent) cvs.attachEvent("onmousemove", OnMouseMove);
//
var lastX = 0, lastY = 0, count = 0;
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
timer1 = setInterval(drawLoop, 16);
function drawLines(x, y) {
ctx.lineWidth = 40;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + ", 1)";
ctx.stroke();
}
function drawLoop() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
drawLines(currentX, currentY);
if (count++ > 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;
}
</script>
</body>
</html>
火狐官方示例
moveTo example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
ctx.stroke();
</script>
</body>
</html>
lineTo example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.lineTo(25, 105);
ctx.fill();
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
arc example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
for (i = 0; i < 4; i++) {
for (j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50;
var y = 25 + i * 50;
var radius = 20;
var startAngle = 0;
var endAngle = Math.PI + (Math.PI * j) / 2;
var clockwise = i % 2 == 0 ? false : true;
ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}
</script>
</body>
</html>
quadraticCurveTo example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
</script>
</body>
</html>
globalAlpha example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F)';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,150,150);
ctx.fillStyle = '#FFF';
ctx.globalAlpha = 0.2;
for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
</script>
</body>
</html>
linearGradient example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
ctx.fillRect(10, 10, 130, 130);
ctx.strokeRect(50, 50, 50, 50);
</script>
</body>
</html>
createRadialGradient example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
ctx.fillStyle = radgrad4;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);
</script>
</body>
</html>
createPattern example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var img = new Image();
img.src = 'http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie_small.png';
img.onload = function () {
var ptrn = ctx.createPattern(img, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);
}
</script>
</body>
</html>
shadowed text example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);
</script>
</body>
</html>
save and restore canvas state example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillRect(0, 0, 150, 150);
ctx.save();
ctx.fillStyle = '#09F'
ctx.fillRect(15, 15, 120, 120);
ctx.save();
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30, 30, 90, 90);
ctx.restore();
ctx.fillRect(45, 45, 60, 60);
ctx.restore();
ctx.fillRect(60, 60, 30, 30);
</script>
</body>
</html>
translate example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillRect(0, 0, 300, 300);
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50 + j * 100, 50 + i * 100);
drawSpirograph(ctx, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
ctx.restore();
}
}
function drawSpirograph(ctx, R, r, O) {
var x1 = R - O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1, y1);
do {
if (i > 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();
}
</script>
</body>
</html>
rotate example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.translate(75, 75);
for (i = 1; i < 6; i++) {
ctx.save();
ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
for (j = 0; j < i * 6; j++) {
ctx.rotate(Math.PI * 2 / (i * 6));
ctx.beginPath();
ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
ctx.fill();
}
ctx.restore();
}
</script>
</body>
</html>
scale example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0, 0, 300, 300);
ctx.save()
ctx.translate(50, 50);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50, 150);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50, 250);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(177.777, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
function drawSpirograph(ctx, R, r, O) {
var x1 = R - O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1, y1);
do {
if (i > 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();
}
</script>
</body>
</html>
setTransform examples:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var sin = Math.sin(Math.PI / 6);
var cos = Math.cos(Math.PI / 6);
ctx.translate(200, 200);
var c = 0;
for (var i = 0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
ctx.fillRect(0, 50, 100, 100);
</script>
</body>
</html>
clip example:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip();
var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);
for (var j = 1; j < 50; j++) {
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75 - Math.floor(Math.random() * 150),
75 - Math.floor(Math.random() * 150));
drawStar(ctx, Math.floor(Math.random() * 4) + 2);
ctx.restore();
}
function drawStar(ctx, r) {
ctx.save();
ctx.beginPath()
ctx.moveTo(r, 0);
for (var i = 0; i < 9; i++) {
ctx.rotate(Math.PI / 5);
if (i % 2 == 0) {
ctx.lineTo((r / 0.525731) * 0.200811, 0);
} else {
ctx.lineTo(r, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
</script>
</body>
</html>
谷歌的例子
arc:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.arc(25, 25, 20, 0, Math.PI, false);
ctx.stroke();
ctx.save();
ctx.scale(0.5, 0.5);
ctx.beginPath();
ctx.arc(75, 25, 20, 0, Math.PI * 2, false);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.arc(25, 75, 20, 0, Math.PI, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(75, 75, 20, 0, Math.PI * 2, true);
ctx.stroke();
</script>
</body>
</html>
clearpath:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(50, 100);
ctx.strokeRect(100.5, 125.5, 49, 49);
ctx.lineTo(100, 50);
ctx.fillRect(50, 125, 50, 50);
ctx.lineTo(50, 0);
ctx.clearRect(50, 125, 100, 50);
ctx.lineTo(0, 50);
ctx.stroke();
</script>
</body>
</html>
gradient:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var g = ctx.createLinearGradient(0, 0, 300, 0);
g.addColorStop(0, '#000');
g.addColorStop(1 / 7, '#00f');
g.addColorStop(2 / 7, '#0f0');
g.addColorStop(3 / 7, '#0ff');
g.addColorStop(4 / 7, '#f00');
g.addColorStop(5 / 7, '#f0f');
g.addColorStop(6 / 7, '#ff0');
g.addColorStop(1, '#fff');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
gradient2:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var g1 = ctx.createLinearGradient(0, 0, 300, 200);
g1.addColorStop(0.0, 'rgba(0, 255, 0, 0.0)');
g1.addColorStop(1.0, 'rgba(0, 255, 0, 1.0)');
var g2 = ctx.createLinearGradient(0, 0, 300, 200);
g2.addColorStop(0.0, 'rgba(0, 255, 0, 1.0)');
g2.addColorStop(1.0, 'rgba(0, 0, 0, 0.0)');
ctx.fillStyle = g1;
ctx.fillRect(0, 0, 300, 100);
ctx.fillStyle = g2;
ctx.fillRect(0, 100, 300, 100);
</script>
</body>
</html>
linewidth:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.moveTo(49 + i / 100, i);
ctx.lineTo(49 + i / 100, i + 1);
ctx.closePath();
ctx.stroke();
}
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.moveTo(i, 49 + i / 100);
ctx.lineTo(i + 1, 49 + i / 100);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
overflow:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillStyle = 'blue';
ctx.fillRect(-50, -50, 100, 100);
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 100, 100);
ctx.strokeStyle = 'black';
ctx.strokeRect(0, 0, 100, 100);
</script>
</body>
</html>
quadraticcurve:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.save();
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(0, 0, 25, 75);
ctx.quadraticCurveTo(50, 0, 50, 50);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(-56, -24);
ctx.scale(3.5, 1.5);
ctx.strokeStyle = '#ddd';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(0, 0, 25, 75);
ctx.quadraticCurveTo(50, 0, 50, 50);
ctx.stroke();
ctx.restore();
</script>
</body>
</html>
resizing:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3; background-color:#eee;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
var size = 80;
var img = new Image();
img.src = "http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie.png";
f();
function f() {
size = (size + 1) % 800;
cvs.width = Number(size + 200);
cvs.height = Number((size + 200) / 2);
ctx.save();
ctx.translate(50, 50);
ctx.scale(0.1, 0.1);
ctx.rotate(size / 800 * Math.PI * 8);
ctx.drawImage(img, 0, -75);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(cvs.width, cvs.height);
ctx.moveTo(20, 20);
ctx.lineTo(80, 20);
ctx.lineTo(80, 80);
ctx.lineTo(20, 80);
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.scale(size / 200, size / 200);
ctx.arc(100, 50, 20, 0, Math.PI, true);
ctx.fill();
ctx.restore();
setTimeout(f, 50);
}
</script>
</body>
</html>
saverestorepath:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(50, 100);
ctx.save();
ctx.lineTo(100, 50);
ctx.restore();
ctx.save();
ctx.lineTo(50, 0);
ctx.restore();
ctx.save();
ctx.lineTo(0, 50);
ctx.restore();
ctx.stroke();
</script>
</body>
</html>
stroke-scale-rotate:
<!doctype html>
<html>
<body >
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3; background:#eee"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.save();
ctx.translate(100.5, 100);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.scale(1, 2);
ctx.rotate(Math.PI / 2);
ctx.lineTo(25, -50)
ctx.rotate(Math.PI / 2);
ctx.lineTo(0, -25)
ctx.scale(1, 2);
ctx.closePath();
ctx.stroke();
ctx.restore();
ctx.translate(50, 50);
ctx.fillStyle = 'white';
ctx.strokeStyle = 'blue';
drawStar(ctx, 20);
function drawStar(ctx, r) {
ctx.save();
ctx.beginPath();
ctx.rotate(-Math.PI / 10);
ctx.scale(r, r);
ctx.moveTo(1, 0);
ctx.lineWidth = ctx.lineWidth / r;
for (var i = 0; i < 9; i++) {
ctx.rotate(Math.PI / 5);
if (i % 2 == 0) {
ctx.lineTo(0.3819653016466596, 0);
} else {
ctx.lineTo(1, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
</script>
</body>
</html>
stroke-should-not-close-path:
<!doctype html>
<html>
<body >
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3; background:#eee"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.fillStyle = "#ccc";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
example1:
<!doctype html>
<html>
<head>
<script type="text/javascript">
var cvs, ctx;
var particles = [];
var NUM_PARTICLES = 20;
function Particle() {
this.x = Math.random() * cvs.width;
this.y = Math.random() * cvs.height;
this.xvel = Math.random() * 5 - 2.5;
this.yvel = Math.random() * 5 - 2.5;
}
Particle.prototype.update = function () {
this.x += this.xvel;
this.y += this.yvel;
this.yvel += 0.1;
if (this.x > cvs.width || this.x < 0) {
this.xvel = -this.xvel;
}
if (this.y > cvs.height || this.y < 0) {
this.yvel = -this.yvel;
}
}
function loop() {
ctx.clearRect(0, 0, cvs.width, cvs.height);
for (var i = 0; i < NUM_PARTICLES; i++) {
particles[i].update();
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[i].x - particles[i].xvel, particles[i].y - particles[i].yvel);
ctx.stroke();
ctx.closePath();
}
setTimeout(loop, 10);
}
function load() {
cvs = document.getElementById("myCanvas");
ctx = cvs.getContext("2d");
for (var i = 0; i < NUM_PARTICLES; i++) {
particles[i] = new Particle();
}
ctx.lineWidth = "2";
ctx.strokeStyle = "rgb(255, 255, 255)";
loop();
}
</script>
</head>
<body onload="load();" style="background-color:black; text-align:center;">
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #444;"></canvas>
</body>
</html>
