[关闭]
@ArrowLLL 2018-08-07T03:07:07.000000Z 字数 22477 阅读 1071

Canvas学习笔记

canvas


Canvas绘图详解 课程笔记


基于状态的绘制

HTML

  1. <canvas id="canvas" style="margin: 50px auto;">
  2. not support
  3. </canvas>

从线条开始

Draw one line

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = 800;
  4. canvas.height = 800;
  5. var context = canvas.getContext("2d");
  6. context.moveTo(100, 100);
  7. context.lineTo(700, 700);
  8. context.lineWidth = 10;
  9. context.strokeStyle = "#058";
  10. context.stroke();
  11. }

Draw more lines

beginPath() 的使用

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = 800;
  4. canvas.height = 800;
  5. var context = canvas.getContext("2d");
  6. context.lineWidth = 10;
  7. context.beginPath();
  8. context.moveTo(100, 200);
  9. context.lineTo(300, 400);
  10. context.lineTo(100, 600);
  11. context.strokeStyle = "red";
  12. context.stroke();
  13. context.beginPath();
  14. context.moveTo(300, 200);
  15. context.lineTo(500, 400);
  16. context.lineTo(300, 600);
  17. context.strokeStyle = "green";
  18. context.stroke();
  19. context.beginPath();
  20. context.moveTo(500, 200);
  21. context.lineTo(700, 400);
  22. context.lineTo(500, 600);
  23. context.strokeStyle = "blue";
  24. context.stroke();
  25. }

Draw a polygon

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. var context = canvas.getContext("2d");
  4. canvas.width = canvas.height = 800;
  5. context.beginPath();
  6. context.moveTo(100, 350);
  7. context.lineTo(500, 350);
  8. context.lineTo(500, 200);
  9. context.lineTo(700, 400);
  10. context.lineTo(500, 600);
  11. context.lineTo(500, 450);
  12. context.lineTo(100, 450);
  13. context.closePath();
  14. context.lineWidth=10;
  15. context.fillStyle='yellow';
  16. context.strokeStyle='#058';
  17. context.fill();
  18. context.stroke();
  19. }

Draw a Rectangle

ctx.rect(x, y, width, height);

  1. function drawRect(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
  2. ctx.beginPath();
  3. ctx.moveTo(x, y);
  4. ctx.lineTo(x + width, y);
  5. ctx.lineTo(x + width, y + height);
  6. ctx.lineTo(x, y + height);
  7. ctx.closePath();
  8. ctx.fillStyle = fillColor;
  9. ctx.strokeStyle = borderColor;
  10. ctx.lineWidth = borderWidth;
  11. ctx.fill();
  12. ctx.stroke();
  13. }
  14. function drawRect2(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
  15. ctx.lineWidth = borderWidth;
  16. ctx.fillStyle = fillColor;
  17. ctx.strokeStyle = borderColor;
  18. ctx.fillRect(x, y, width, height);
  19. ctx.strokeRect(x, y, width, height);
  20. }
  21. window.onload = function() {
  22. var canvas = document.getElementById('canvas');
  23. var context = canvas.getContext("2d");
  24. canvas.width = canvas.height = 800;
  25. drawRect(context, 100, 100, 400, 400, 10, "#058", "red");
  26. drawRect2(context, 300, 300, 400, 400, 10, "#058", "rgba(0, 255, 0, 0.5)");
  27. }

线条的属性

线条的帽子: lineCap

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext("2d");
  5. context.lineWidth = 30;
  6. context.strokeStyle='#058';
  7. context.beginPath();
  8. context.moveTo(100, 200);
  9. context.lineTo(700, 200);
  10. context.lineCap = 'butt';
  11. context.stroke();
  12. context.beginPath();
  13. context.moveTo(100, 400);
  14. context.lineTo(700, 400);
  15. context.lineCap='round';
  16. context.stroke();
  17. context.beginPath();
  18. context.moveTo(100, 600);
  19. context.lineTo(700, 600);
  20. context.lineCap = 'square';
  21. context.stroke();
  22. //baseline
  23. context.lineWidth = 1;
  24. context.strokeStyle = '#27a';
  25. context.moveTo(100, 100);
  26. context.lineTo(100, 700);
  27. context.moveTo(700, 100);
  28. context.lineTo(700, 700);
  29. context.stroke();
  30. }

Draw a Star

  1. function drawStar(ctx, r, R, x, y, rot=0) {
  2. var drawStarLine = (angle, radius) => {
  3. ctx.lineTo(Math.cos(angle) * radius + x, -Math.sin(angle) * radius + y);
  4. }
  5. ctx.beginPath();
  6. for(var i = 0; i < 5; i++) {
  7. var ang = (18 + i * 72 - rot) / 180 * Math.PI;
  8. drawStarLine(ang, R);
  9. ang = (54 + i * 72 - rot) / 180 * Math.PI;
  10. drawStarLine(ang, r);
  11. }
  12. ctx.closePath();
  13. ctx.stroke()
  14. }
  15. window.onload = function() {
  16. var canvas = document.getElementById('canvas');
  17. canvas.width = canvas.height = 800;
  18. var context = canvas.getContext("2d");
  19. context.lineWidth=10;
  20. drawStar(context, 150, 300, 400, 400);
  21. }

线条的连接(lineJoin)

  1. context.lineJoin='miter | round | bevel';

图形变换

stars sky

  1. function drawStar(ctx, r, R, x, y, rot=0) {
  2. var drawStarLine = (angle, radius) => {
  3. ctx.lineTo(Math.cos(angle) * radius + x, -Math.sin(angle) * radius + y);
  4. }
  5. ctx.beginPath();
  6. for(var i = 0; i < 5; i++) {
  7. var ang = (18 + i * 72 - rot) / 180 * Math.PI;
  8. drawStarLine(ang, R);
  9. ang = (54 + i * 72 - rot) / 180 * Math.PI;
  10. drawStarLine(ang, r);
  11. }
  12. ctx.closePath();
  13. ctx.fillStyle='#fb3';
  14. ctx.strokeStyle='#fd5';
  15. ctx.lineWidth=3;
  16. ctx.lineJoin = "round";
  17. ctx.fill();
  18. ctx.stroke();
  19. }
  20. window.onload = function() {
  21. var canvas = document.getElementById('canvas');
  22. canvas.width = canvas.height = 800;
  23. var context = canvas.getContext("2d");
  24. context.fillStyle = 'black';
  25. context.fillRect(0, 0, canvas.width, canvas.height);
  26. for(var i = 0; i < 200; i++) {
  27. var r = Math.random() * 10 + 20;
  28. var x = Math.random() * canvas.width;
  29. var y = Math.random() * canvas.height;
  30. drawStar(context, r/2.0, r, x, y);
  31. }
  32. }

图形变换函数

  1. function starPath(ctx) {
  2. var drawStarLine = (angle, radius) => {
  3. ctx.lineTo(Math.cos(angle) * radius, -Math.sin(angle) * radius);
  4. }
  5. ctx.beginPath();
  6. for(var i = 0; i < 5; i++) {
  7. var ang = (18 + i * 72) / 180 * Math.PI;
  8. drawStarLine(ang, 1);
  9. ang = (54 + i * 72) / 180 * Math.PI;
  10. drawStarLine(ang, 0.5);
  11. }
  12. ctx.closePath();
  13. }
  14. function drawStar(ctx, x, y, R, rot) {
  15. ctx.save();
  16. ctx.translate(x, y);
  17. ctx.rotate(rot / 180 * Math.PI);
  18. ctx.scale(R, R);
  19. starPath(ctx);
  20. ctx.fillStyle = '#fb3';
  21. ctx.fill();
  22. ctx.restore();
  23. }
  24. window.onload = function() {
  25. var canvas = document.getElementById('canvas');
  26. canvas.width = canvas.height = 800;
  27. var context = canvas.getContext("2d");
  28. for(var i = 0; i < 200; i ++) {
  29. var r = Math.random() * 180;
  30. var R = Math.random();
  31. var x = Math.random() * canvas.width;
  32. var y = Math.random() * canvas.height;
  33. drawStar(context, x, y, R, r);
  34. }
  35. }

图形变换2

transform(a,b,c,d,e,f)


a, d —— 水平、垂直缩放
b, c —— 水平、垂直倾斜
e, f —— 水平、垂直位移

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = 'red';
  6. context.strokeStyle = '#058';
  7. context.lineWidth = 5;
  8. context.save();
  9. context.transform(1.2, 0.2, 0.2, 1.5, 50, 20);
  10. context.setTransform(1.2, 0.2, 0.2, 1.5, 50, 20);
  11. context.fillRect(50, 50, 300, 300);
  12. context.strokeRect(50, 50, 300, 300);
  13. context.restore();
  14. };

填充样式

fillStyle的使用

linear Gradient

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. var lineGrad = context.createLinearGradient(0, 0, 400, 400);
  6. lineGrad.addColorStop(0.0, 'white');
  7. lineGrad.addColorStop(0.25, 'yellow');
  8. lineGrad.addColorStop(0.5, 'green');
  9. lineGrad.addColorStop(0.75, 'blue');
  10. lineGrad.addColorStop(1.0, 'black');
  11. context.fillStyle = lineGrad;
  12. context.fillRect(0, 0, 800, 800);
  13. };

Radial Gradient

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. var radialGrad = context.createRadialGradient(400, 400, 0, 400, 400, 400);
  6. radialGrad.addColorStop(0.0, 'white');
  7. radialGrad.addColorStop(0.25, 'yellow');
  8. radialGrad.addColorStop(0.5, 'green');
  9. radialGrad.addColorStop(0.75, 'blue');
  10. radialGrad.addColorStop(1.0, 'black');
  11. context.fillStyle = radialGrad;
  12. context.fillRect(0, 0, 800, 800);
  13. };

图片样式

  1. function starPath(ctx) {
  2. var drawStarLine = function(angle, radius) {
  3. ctx.lineTo(Math.cos(angle) * radius, -Math.sin(angle) * radius);
  4. };
  5. ctx.beginPath();
  6. for(var i = 0; i < 5; i++) {
  7. var ang = (18 + i * 72) / 180 * Math.PI;
  8. drawStarLine(ang, 1);
  9. ang = (54 + i * 72) / 180 * Math.PI;
  10. drawStarLine(ang, 0.5);
  11. }
  12. ctx.closePath();
  13. }
  14. function drawStar(ctx, x, y, R, rot) {
  15. ctx.save();
  16. ctx.translate(x, y);
  17. ctx.rotate(rot / 180 * Math.PI);
  18. ctx.scale(R, R);
  19. starPath(ctx);
  20. ctx.fillStyle = '#fb3';
  21. ctx.fill();
  22. ctx.restore();
  23. }
  24. function createBackgroundCanvas() {
  25. var backCanvas = document.createElement('canvas');
  26. backCanvas.width = backCanvas.height = 100;
  27. var backContext = backCanvas.getContext('2d');
  28. drawStar(backContext, 50, 50, 50, 0);
  29. return backCanvas;
  30. }
  31. window.onload = function() {
  32. var canvas = document.getElementById('canvas');
  33. canvas.width = canvas.height = 800;
  34. var context = canvas.getContext('2d');
  35. var backCanvas = createBackgroundCanvas();
  36. var pattern = context.createPattern(backCanvas, "repeat");
  37. context.fillStyle = pattern;
  38. context.fillRect(0, 0, 800, 800);
  39. };

曲线的绘制

Draw an Arc

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 1000;
  4. var context = canvas.getContext('2d');
  5. context.lineWidth = 5;
  6. context.strokeStyle = '#058';
  7. for (var i = 0; i < 10; i++) {
  8. context.beginPath();
  9. context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI * (i + 1) / 10);
  10. context.stroke();
  11. }
  12. for (var i = 0; i < 10; i++) {
  13. context.beginPath();
  14. context.arc(50 + i * 100, 180, 40, 0, 2 * Math.PI * (i + 1) / 10);
  15. context.closePath();
  16. context.stroke();
  17. }
  18. for(var i = 0; i < 10; i++) {
  19. context.beginPath();
  20. context.arc(50 + i * 100, 300, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
  21. context.closePath();
  22. context.stroke();
  23. }
  24. for(var i = 0; i < 10; i++) {
  25. context.beginPath();
  26. context.arc(50 + i * 100, 420, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
  27. context.stroke();
  28. }
  29. context.fillStyle = '#058';
  30. for(var i = 0; i < 10; i++) {
  31. context.beginPath();
  32. context.arc(50 + i * 100, 540, 40, 0, 2 * Math.PI * (i + 1) / 10);
  33. context.closePath();
  34. context.fill();
  35. }
  36. for(var i = 0; i < 10; i++) {
  37. context.beginPath();
  38. context.arc(50 + i * 100, 660, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
  39. context.fill();
  40. }
  41. };

Rounded Corner Rectangle

  1. function pathRoundRect(ctx, width, height, radius) {
  2. ctx.beginPath();
  3. ctx.arc(radius, radius, radius, Math.PI, 1.5 * Math.PI);
  4. ctx.lineTo(width - 2 * radius, 0);
  5. ctx.arc(width - radius, radius, radius, 1.5 * Math.PI, 2 * Math.PI);
  6. ctx.lineTo(width, height - radius);
  7. ctx.arc(width - radius, height - radius, radius, 0, 0.5 * Math.PI);
  8. ctx.lineTo(radius, height);
  9. ctx.arc(radius, height - radius, radius, 0.5 * Math.PI, Math.PI);
  10. ctx.closePath();
  11. }
  12. function fillRoundRect(ctx, x, y, width, height, radius, fillColor) {
  13. if ( 2 * radius > width || 2 * radius > height)
  14. return;
  15. ctx.save();
  16. ctx.translate(x, y);
  17. pathRoundRect(ctx, width, height, radius);
  18. ctx.fillStyle = fillColor || "black";
  19. ctx.fill();
  20. ctx.restore();
  21. }
  22. function drawRoundRect(ctx, x, y, width, height, radius, lineWidth, strokeColor) {
  23. if ( 2 * radius > width || 2 * radius > height)
  24. return;
  25. ctx.save();
  26. ctx.translate(x, y);
  27. pathRoundRect(ctx, width, height, radius);
  28. ctx.lineWidth = lineWidth || 1;
  29. ctx.strokeStyle = strokeColor || 'black';
  30. ctx.stroke();
  31. ctx.restore();
  32. }
  33. window.onload = function() {
  34. var canvas = document.getElementById('canvas');
  35. canvas.width = canvas.height = 1000;
  36. var context = canvas.getContext('2d');
  37. drawRoundRect(context, 150, 150, 500, 500, 10, "#bbada0");
  38. for (var i = 0; i < 4; i++) {
  39. for (var j = 0; j < 4; j++) {
  40. fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, "#ccc0b3");
  41. }
  42. }
  43. };

arcTo()的使用

context.arcTo(x1, y1, x2, y2, radius)

  1. function arcToTest(ctx, x0, y0, x1, y1, x2, y2, R) {
  2. ctx.beginPath();
  3. ctx.moveTo(x0, y0);
  4. ctx.arcTo(x1, y1, x2, y2, R);
  5. ctx.lineWidth = 6;
  6. ctx.strokeStyle = "red";
  7. ctx.stroke();
  8. ctx.beginPath();
  9. ctx.moveTo(x0, y0);
  10. ctx.lineTo(x1, y1);
  11. ctx.lineTo(x2, y2);
  12. ctx.lineWidth = 2;
  13. ctx.strokeStyle = 'gray';
  14. ctx.stroke();
  15. }
  16. window.onload = function() {
  17. var canvas = document.getElementById('canvas');
  18. canvas.width = canvas.height = 800;
  19. var context = canvas.getContext('2d');
  20. arcToTest(context, 150, 100, 650, 100, 650, 600, 300);
  21. };

Draw a Moon

  1. function dis(x0, y0, x1, y1) {
  2. return Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
  3. }
  4. function pathMoon(ctx, d) {
  5. ctx.beginPath();
  6. ctx.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true);
  7. ctx.moveTo(0, -1);
  8. ctx.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d);
  9. ctx.closePath();
  10. }
  11. function fillmoon(ctx, d, x, y, R, rot, fillColor) {
  12. ctx.save();
  13. ctx.translate(x, y);
  14. ctx.rotate(rot * Math.PI / 180);
  15. ctx.scale(R, R);
  16. pathMoon(ctx, d);
  17. ctx.fillStyle = fillColor || "#fb5";
  18. ctx.fill();
  19. ctx.restore();
  20. }
  21. window.onload = function() {
  22. var canvas = document.getElementById('canvas');
  23. canvas.width = canvas.height = 800;
  24. var context = canvas.getContext('2d');
  25. fillmoon(context, 2, 400, 400, 300, 30);
  26. };

贝塞尔曲线 Bezier

context.quadraticCurveTo(x1, y1, x2, y2)

Canvas Quadratic Curve Example

  1. function dis(x0, y0, x1, y1) {
  2. return Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
  3. }
  4. function pathMoon(ctx, d) {
  5. ctx.beginPath();
  6. ctx.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true);
  7. ctx.moveTo(0, -1);
  8. //ctx.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d);
  9. ctx.quadraticCurveTo(d, 0, 0, 1);
  10. ctx.closePath();
  11. }
  12. function fillmoon(ctx, d, x, y, R, rot, fillColor) {
  13. ctx.save();
  14. ctx.translate(x, y);
  15. ctx.rotate(rot * Math.PI / 180);
  16. ctx.scale(R, R);
  17. pathMoon(ctx, d);
  18. ctx.fillStyle = fillColor || "#fb5";
  19. ctx.fill();
  20. ctx.restore();
  21. }
  22. window.onload = function() {
  23. var canvas = document.getElementById('canvas');
  24. canvas.width = canvas.height = 800;
  25. var context = canvas.getContext('2d');
  26. fillmoon(context, 1.2, 400, 400, 300, 30);
  27. };

三次贝塞尔曲线

BezierCurveTo(x1, y1, x2, y2, x3, y3);

Canvas Bézier Curve Example

  1. function drawLand(ctx) {
  2. ctx.save();
  3. ctx.beginPath();
  4. ctx.moveTo(0, 600);
  5. ctx.bezierCurveTo(540, 400, 660, 800, 1200, 600);
  6. ctx.lineTo(1200, 800);
  7. ctx.lineTo(0, 800);
  8. ctx.closePath();
  9. var landStyle = ctx.createLinearGradient(0, 800, 0, 0);
  10. landStyle.addColorStop(0.0, '#030');
  11. landStyle.addColorStop(1.0, '#580');
  12. ctx.fillStyle = landStyle;
  13. ctx.fill();
  14. ctx.restore();
  15. }
  16. window.onload = function() {
  17. var canvas = document.getElementById('canvas');
  18. canvas.width = canvas.height = 800;
  19. var context = canvas.getContext('2d');
  20. drawLand(context);
  21. };

文字渲染

文字渲染基础

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.font = "bold 40px Arial";
  6. context.fillStyle = '#058';
  7. context.fillText("Hello World!", 40, 100);
  8. context.lineWidth = 1;
  9. context.strokeStyle = '#058';
  10. context.strokeText("你好,世界!", 40, 200);
  11. context.fillText("Hello World!", 40, 300, 150);
  12. context.strokeText("你好,世界!", 40, 400, 150);
  13. var lineGrad = context.createLinearGradient(0, 0, 300, 0);
  14. lineGrad.addColorStop(0.0, 'red');
  15. lineGrad.addColorStop(0.25, 'orange');
  16. lineGrad.addColorStop(0.5, 'yellow');
  17. lineGrad.addColorStop(0.75, 'green');
  18. lineGrad.addColorStop(1.0, 'purple');
  19. context.fillStyle = lineGrad;
  20. context.fillText("Hello World!", 40, 500);
  21. };

font: 字型、字号和字体

context.font = "font-style font-variant font-weight font-size font-family"

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "normal 40px sans-serif";
  7. context.fillText("hello world!", 40, 100);
  8. context.font = "italic 40px sans-serif";
  9. context.fillText("hello world!", 40, 200);
  10. context.font = "oblique 40px sans-serif";
  11. context.fillText("hello world!", 40, 300);
  12. };
  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "bold 40px sans-serif";
  7. context.fillText("Hello World!", 40, 100);
  8. context.font = "small-caps bold 40px sans-serif";
  9. context.fillText("Hello World!", 40, 200);
  10. };
  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "lighter 40px sans-serif";
  7. context.fillText("hello world!", 40, 100);
  8. context.font = "normal 40px sans-serif";
  9. context.fillText("hello world!", 40, 200);
  10. context.font = "bold 40px sans-serif";
  11. context.fillText("hello world!", 40, 300);
  12. context.font = "bolder 40px sans-serif";
  13. context.fillText("hello world!", 40, 400);
  14. };
  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "xx-small sans-serif";
  7. context.fillText("hello world!", 40, 100);
  8. context.font = "x-small sans-serif";
  9. context.fillText("hello world!", 40, 200);
  10. context.font = "medium sans-serif";
  11. context.fillText("hello world!", 40, 300);
  12. context.font = "large sans-serif";
  13. context.fillText("hello world!", 40, 400);
  14. context.font = "x-large sans-serif";
  15. context.fillText("hello world!", 40, 500);
  16. context.font = "xx-large sans-serif";
  17. context.fillText("hello world!", 40, 600);
  18. };

文本对齐

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "bold 40px sans-serif";
  7. context.textAlign = 'left';
  8. context.fillText("textAlign = left", 400, 100);
  9. context.textAlign = 'center';
  10. context.fillText("textAlign = center", 400, 200);
  11. context.textAlign = 'right';
  12. context.fillText("textAlign = right", 400, 300);
  13. context.strokeStyle = "#888";
  14. context.moveTo(400, 0);
  15. context.lineTo(400, 400);
  16. context.stroke();
  17. };
  1. function drawBaseline(ctx, height) {
  2. ctx.save();
  3. ctx.strokeStyle = "#888";
  4. ctx.moveTo(0, height);
  5. ctx.lineTo(800, height);
  6. ctx.stroke();
  7. ctx.restore();
  8. }
  9. window.onload = function() {
  10. var canvas = document.getElementById('canvas');
  11. canvas.width = canvas.height = 800;
  12. var context = canvas.getContext('2d');
  13. context.fillStyle = '#058';
  14. context.font = "bold 40px sans-serif";
  15. context.textBaseline = 'top';
  16. context.fillText("textBaseline = top", 100, 100);
  17. drawBaseline(context, 100);
  18. context.textBaseline = 'middle';
  19. context.fillText("textBaseline = middle", 100, 200);
  20. drawBaseline(context, 200);
  21. context.textBaseline = 'bottom';
  22. context.fillText("textBaseline = bottom", 100, 300);
  23. drawBaseline(context, 300);
  24. context.textBaseline = 'alphabetic';
  25. context.fillText("Hello, 世界!", 100, 400);
  26. drawBaseline(context, 400);
  27. context.textBaseline = 'ideographic';
  28. context.fillText("Hello, 世界!", 100, 500);
  29. drawBaseline(context, 500);
  30. context.textBaseline = 'hanging';
  31. context.fillText("Hello, 世界!", 100, 600);
  32. drawBaseline(context, 600);
  33. };
  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "bold 120px Arial";
  7. context.textAlign = 'center';
  8. context.textBaseline = 'middle';
  9. context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);
  10. context.strokeStyle = "#888";
  11. context.moveTo(0, canvas.height / 2);
  12. context.lineTo(canvas.width, canvas.height / 2);
  13. context.moveTo(canvas.width / 2, 0);
  14. context.lineTo(canvas.width / 2, canvas.height);
  15. context.stroke();
  16. };

文本的度量

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.font = "bold 40px sans-serif";
  7. context.fillText("Hello 世界!", 40, 100);
  8. var textWidth = context.measureText("Hello 世界!").width;
  9. context.fillText("the length of the string is " + textWidth + "px", 40, 200);
  10. };

Canvas高级内容

阴影

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = canvas.height = 800;
  4. var context = canvas.getContext('2d');
  5. context.fillStyle = '#058';
  6. context.shadowColor = "gray";
  7. context.shadowOffsetX = context.shadowOffsetY = 20;
  8. context.shadowBlur = 5;
  9. context.fillRect(200, 200, 400, 400);
  10. };

globalAlpha和globalCompositeOperation

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = 1200;
  4. canvas.height = 800;
  5. var context = canvas.getContext('2d');
  6. context.fillStyle = '#058';
  7. context.globalAlpha = 0.7;
  8. for(var i = 0; i < 100; i++) {
  9. var R = Math.floor(Math.random() * 255);
  10. var G = Math.floor(Math.random() * 255);
  11. var B = Math.floor(Math.random() * 255);
  12. context.fillStyle = "rgb(" + R + ", " + G + ", " + B + ")";
  13. context.beginPath();
  14. context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
  15. context.fill();
  16. }
  17. };
  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = 1200;
  4. canvas.height = 800;
  5. var context = canvas.getContext('2d');
  6. context.fillStyle = 'blue';
  7. context.fillRect(100, 200, 400, 400);
  8. context.globalCompositeOperation = "destination-over";
  9. context.fillStyle = 'red';
  10. context.beginPath();
  11. context.moveTo(400, 300);
  12. context.lineTo(650, 700);
  13. context.lineTo(150, 700);
  14. context.closePath();
  15. context.fill();
  16. };
  1. var balls = new Array(100);
  2. function draw(ctx) {
  3. var canvas = ctx.canvas;
  4. ctx.clearRect(0, 0, canvas.width, canvas.height);
  5. for (var i = 0; i < balls.length; i++) {
  6. ctx.globalCompositeOperation = 'lighter';
  7. ctx.fillStyle = balls[i].color;
  8. ctx.beginPath();
  9. ctx.arc(balls[i].x, balls[i].y, balls[i].radius, 0, 2*Math.PI);
  10. ctx.closePath();
  11. ctx.fill();
  12. }
  13. }
  14. function update(canvasWidth, canvasHeight) {
  15. for(var i = 0; i < balls.length; i++) {
  16. balls[i].x += balls[i].vx;
  17. balls[i].y += balls[i].vy;
  18. if(balls[i].x - balls[i].radius <= 0) {
  19. balls[i].vx = -balls[i].vx;
  20. balls[i].x = balls[i].radius;
  21. }
  22. if(balls[i].x + balls[i].radius >= canvasWidth) {
  23. balls[i].vx = - balls[i].vx;
  24. balls[i].x = canvasWidth - balls[i].radius;
  25. }
  26. if(balls[i].y - balls[i].radius <= 0) {
  27. balls[i].vy = - balls[i].vy;
  28. balls[i].y = balls[i].radius;
  29. }
  30. if(balls[i].y + balls[i].radius >= canvasHeight) {
  31. balls[i].vy = -balls[i].vy;
  32. balls[i].y = canvasHeight - balls[i].radius;
  33. }
  34. }
  35. }
  36. window.onload = function() {
  37. var canvas = document.getElementById('canvas');
  38. canvas.width = 1200;
  39. canvas.height = 800;
  40. var context = canvas.getContext('2d');
  41. context.fillStyle = '#058';
  42. context.globalAlpha = 0.7;
  43. for(var i = 0; i < balls.length; i++) {
  44. var R = Math.floor(Math.random() * 255);
  45. var G = Math.floor(Math.random() * 255);
  46. var B = Math.floor(Math.random() * 255);
  47. var radius = Math.random() * 50 + 20;
  48. balls[i] = {
  49. color: "rgb(" + R + ", " + G + ", " + B + ")",
  50. radius: radius,
  51. x: Math.random() * canvas.width,
  52. y: Math.random() * canvas.height,
  53. vx: (Math.random()) * Math.pow(-1, Math.floor(Math.random() * 100)),
  54. vy: (Math.random()) * Math.pow(-1, Math.floor(Math.random() * 100))
  55. };
  56. }
  57. setInterval(function() {
  58. draw(context);
  59. update(canvas.width, canvas.height);
  60. }, 50);
  61. };

clip和剪辑区域

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = 1200;
  4. canvas.height = 800;
  5. var context = canvas.getContext('2d');
  6. context.beginPath();
  7. context.fillStype = "#000";
  8. context.fillRect(0, 0, canvas.width, canvas.height);
  9. context.beginPath();
  10. context.fillStyle = "#fff";
  11. context.arc(canvas.width / 2, canvas.height / 2, 200, 0, Math.PI * 2);
  12. context.fill();
  13. context.clip();
  14. context.font = "bold 150px Arial";
  15. context.textAlign = 'center';
  16. context.textBaseline = 'middle';
  17. context.fillStyle = '#058';
  18. context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);
  19. };

路径方向和剪纸效果

非零环绕原则

  1. window.onload = function() {
  2. var canvas = document.getElementById('canvas');
  3. canvas.width = 800;
  4. canvas.height = 800;
  5. var context = canvas.getContext('2d');
  6. context.beginPath();
  7. context.arc(400, 400, 300, 0, Math.PI * 2, false);
  8. context.arc(400, 400, 150, 0, Math.PI * 2, true);
  9. context.closePath();
  10. context.fillStyle = "#058";
  11. context.shadowColor = "gray";
  12. context.shadowOffsetX = context.shadowOffsetY = 10;
  13. context.shadowBlur = 10;
  14. context.fill();
  15. };

Canvas交互和isPointInPath

  1. var balls = [];
  2. var canvas = document.getElementById('canvas');
  3. var context = canvas.getContext('2d');
  4. window.onload = function() {
  5. canvas.width = 800;
  6. canvas.height = 800;
  7. for (var i = 0; i < 10; i++) {
  8. var aBall = {
  9. x: Math.random() * canvas.width,
  10. y: Math.random() * canvas.height,
  11. r: Math.random() * 50 + 20
  12. };
  13. balls[i] = aBall;
  14. }
  15. draw();
  16. canvas.addEventListener("mouseup", detect);
  17. };
  18. function draw() {
  19. for (var i = 0; i < balls.length; i++) {
  20. context.beginPath();
  21. context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI*2);
  22. context.fillStyle = '#058';
  23. context.fill();
  24. }
  25. }
  26. function detect(event) {
  27. var x = event.clientX - canvas.getBoundingClientRect().left;
  28. var y = event.clientY - canvas.getBoundingClientRect().top;
  29. for(var i = 0; i < balls.length; i++) {
  30. context.beginPath();
  31. context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
  32. if (context.isPointInPath(x, y)) {
  33. context.fillStyle = 'red';
  34. context.fill();
  35. }
  36. }
  37. }

Canvas图形库

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注