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

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');
  4.     canvas.width = 800;
  5.     canvas.height = 800;
  7.     var context = canvas.getContext("2d");
  9.     context.moveTo(100, 100);
  10.     context.lineTo(700, 700);
  12.     context.lineWidth = 10;
  13.     context.strokeStyle = "#058";
  15.     context.stroke();
  16. }

Draw more lines

beginPath() 的使用

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

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;
  6.     context.beginPath();
  7.     context.moveTo(100, 350);
  8.     context.lineTo(500, 350);
  9.     context.lineTo(500, 200);
  10.     context.lineTo(700, 400);
  11.     context.lineTo(500, 600);
  12.     context.lineTo(500, 450);
  13.     context.lineTo(100, 450);
  14.     context.closePath();
  16.     context.lineWidth=10;
  17.     context.fillStyle='yellow';
  18.     context.strokeStyle='#058';
  20.     context.fill();
  21.     context.stroke();
  22. }

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();
  9.     ctx.fillStyle = fillColor;
  10.     ctx.strokeStyle = borderColor;
  11.     ctx.lineWidth = borderWidth;
  13.     ctx.fill();
  14.     ctx.stroke();
  15. }
  17. function drawRect2(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
  18.     ctx.lineWidth = borderWidth;
  19.     ctx.fillStyle = fillColor;
  20.     ctx.strokeStyle = borderColor;
  22.     ctx.fillRect(x, y, width, height);
  23.     ctx.strokeRect(x, y, width, height);
  25. }
  27. window.onload = function() {
  28.     var canvas = document.getElementById('canvas');
  29.     var context = canvas.getContext("2d");
  30.     canvas.width = canvas.height = 800;
  32.     drawRect(context, 100, 100, 400, 400, 10, "#058", "red");
  33.     drawRect2(context, 300, 300, 400, 400, 10, "#058", "rgba(0, 255, 0, 0.5)");
  34. }

线条的属性

线条的帽子： lineCap

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

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.     }
  6.     ctx.beginPath();
  7.     for(var i = 0; i < 5; i++) {
  8.         var ang = (18 + i * 72 - rot) / 180 * Math.PI;
  9.         drawStarLine(ang, R);
  10.         ang = (54 + i * 72 - rot) / 180 * Math.PI;
  11.         drawStarLine(ang, r);
  12.     }
  13.     ctx.closePath();
  15.     ctx.stroke()
  16. }
  18. window.onload = function() {
  19.     var canvas = document.getElementById('canvas');
  20.     canvas.width = canvas.height = 800;
  21.     var context = canvas.getContext("2d");
  23.     context.lineWidth=10;
  24.     drawStar(context, 150, 300, 400, 400);
  25. }

线条的连接（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.     }
  6.     ctx.beginPath();
  7.     for(var i = 0; i < 5; i++) {
  8.         var ang = (18 + i * 72 - rot) / 180 * Math.PI;
  9.         drawStarLine(ang, R);
  10.         ang = (54 + i * 72 - rot) / 180 * Math.PI;
  11.         drawStarLine(ang, r);
  12.     }
  13.     ctx.closePath();
  15.     ctx.fillStyle='#fb3';
  16.     ctx.strokeStyle='#fd5';
  17.     ctx.lineWidth=3;
  18.     ctx.lineJoin = "round";
  20.     ctx.fill();
  21.     ctx.stroke();
  22. }
  24. window.onload = function() {
  25.     var canvas = document.getElementById('canvas');
  26.     canvas.width = canvas.height = 800;
  27.     var context = canvas.getContext("2d");
  29.     context.fillStyle = 'black';
  30.     context.fillRect(0, 0, canvas.width, canvas.height);
  32.     for(var i = 0; i < 200; i++) {
  33.         var r = Math.random() * 10 + 20;
  34.         var x = Math.random() * canvas.width;
  35.         var y = Math.random() * canvas.height;
  36.         drawStar(context, r/2.0, r, x, y);
  37.     }
  38. }

图形变换函数

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

图形变换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');
  6.   context.fillStyle = 'red';
  7.   context.strokeStyle = '#058';
  8.   context.lineWidth = 5;
  10.   context.save();
  11.   context.transform(1.2, 0.2, 0.2, 1.5, 50, 20);
  12.   context.setTransform(1.2, 0.2, 0.2, 1.5, 50, 20);
  13.   context.fillRect(50, 50, 300, 300);
  14.   context.strokeRect(50, 50, 300, 300);
  15.   context.restore();
  16. };

填充样式

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');
  6.   var lineGrad  = context.createLinearGradient(0, 0, 400, 400);
  7.   lineGrad.addColorStop(0.0, 'white');
  8.   lineGrad.addColorStop(0.25, 'yellow');
  9.   lineGrad.addColorStop(0.5, 'green');
  10.   lineGrad.addColorStop(0.75, 'blue');
  11.   lineGrad.addColorStop(1.0, 'black');
  13.   context.fillStyle = lineGrad;
  14.   context.fillRect(0, 0, 800, 800);
  15. };

Radial Gradient

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

图片样式

  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. }
  25. function createBackgroundCanvas() {
  26.   var backCanvas = document.createElement('canvas');
  27.   backCanvas.width = backCanvas.height = 100;
  28.   var backContext = backCanvas.getContext('2d');
  29.   drawStar(backContext, 50, 50, 50, 0);
  30.   return backCanvas;
  31. }
  33. window.onload = function() {
  34.   var canvas = document.getElementById('canvas');
  35.   canvas.width = canvas.height = 800;
  36.   var context = canvas.getContext('2d');
  38.   var backCanvas = createBackgroundCanvas();
  39.   var pattern = context.createPattern(backCanvas, "repeat");
  40.   context.fillStyle = pattern;
  41.   context.fillRect(0, 0, 800, 800);
  42. };

曲线的绘制

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');
  6.   context.lineWidth = 5;
  7.   context.strokeStyle = '#058';
  9.   for (var i = 0; i < 10; i++) {
  10.     context.beginPath();
  11.     context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI * (i + 1) / 10);
  12.     context.stroke();
  13.   }
  15.   for (var i = 0; i < 10; i++) {
  16.     context.beginPath();
  17.     context.arc(50 + i * 100, 180, 40, 0, 2 * Math.PI * (i + 1) / 10);
  18.     context.closePath();
  19.     context.stroke();
  20.   }
  22.   for(var i = 0; i < 10; i++) {
  23.     context.beginPath();
  24.     context.arc(50 + i * 100, 300, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
  25.     context.closePath();
  26.     context.stroke();
  27.   }
  29.   for(var i = 0; i < 10; i++) {
  30.     context.beginPath();
  31.     context.arc(50 + i * 100, 420, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
  32.     context.stroke();
  33.   }
  34.   context.fillStyle = '#058';
  36.   for(var i = 0; i < 10; i++) {
  37.     context.beginPath();
  38.     context.arc(50 + i * 100, 540, 40, 0, 2 * Math.PI * (i + 1) / 10);
  39.     context.closePath();
  40.     context.fill();
  41.   }
  43.   for(var i = 0; i < 10; i++) {
  44.     context.beginPath();
  45.     context.arc(50 + i * 100, 660, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
  46.     context.fill();
  47.   }
  48. };

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. }
  13. function fillRoundRect(ctx, x, y, width, height, radius, fillColor) {
  14.   if ( 2 * radius > width || 2 * radius > height)
  15.     return;
  16.   ctx.save();
  17.   ctx.translate(x, y);
  18.   pathRoundRect(ctx, width, height, radius);
  19.   ctx.fillStyle = fillColor || "black";
  20.   ctx.fill();
  21.   ctx.restore();
  22. }
  24. function drawRoundRect(ctx, x, y, width, height, radius, lineWidth, strokeColor) {
  25.   if ( 2 * radius > width || 2 * radius > height)
  26.     return;
  28.   ctx.save();  
  29.   ctx.translate(x, y);
  30.   pathRoundRect(ctx, width, height, radius);
  31.   ctx.lineWidth = lineWidth || 1;
  32.   ctx.strokeStyle = strokeColor || 'black';
  33.   ctx.stroke();
  34.   ctx.restore();
  35. }
  37. window.onload = function() {
  38.   var canvas = document.getElementById('canvas');
  39.   canvas.width = canvas.height = 1000;
  40.   var context = canvas.getContext('2d');
  42.   drawRoundRect(context, 150, 150, 500, 500, 10, "#bbada0");
  43.   for (var i = 0; i < 4; i++) {
  44.     for (var j = 0; j < 4; j++) {
  45.       fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, "#ccc0b3");
  46.     }
  47.   }
  48. };

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);
  6.   ctx.lineWidth = 6;
  7.   ctx.strokeStyle = "red";
  8.   ctx.stroke();
  10.   ctx.beginPath();
  11.   ctx.moveTo(x0, y0);
  12.   ctx.lineTo(x1, y1);
  13.   ctx.lineTo(x2, y2);
  15.   ctx.lineWidth = 2;
  16.   ctx.strokeStyle = 'gray';
  17.   ctx.stroke();
  18. }
  20. window.onload = function() {
  21.   var canvas = document.getElementById('canvas');
  22.   canvas.width = canvas.height = 800;
  23.   var context = canvas.getContext('2d');
  25.   arcToTest(context, 150, 100, 650, 100, 650, 600, 300);
  26. };

Draw a Moon

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

贝塞尔曲线 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. }
  5. function pathMoon(ctx, d) {
  6.   ctx.beginPath();
  7.   ctx.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true);
  8.   ctx.moveTo(0, -1);
  9.   //ctx.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d);
  10.   ctx.quadraticCurveTo(d, 0, 0, 1);
  11.   ctx.closePath();
  12. }
  14. function fillmoon(ctx, d, x, y, R, rot, fillColor) {
  15.   ctx.save();
  16.   ctx.translate(x, y);
  17.   ctx.rotate(rot * Math.PI / 180);
  18.   ctx.scale(R, R);
  19.   pathMoon(ctx, d);
  20.   ctx.fillStyle = fillColor || "#fb5";
  21.   ctx.fill();
  22.   ctx.restore();
  23. }
  25. window.onload = function() {
  26.   var canvas = document.getElementById('canvas');
  27.   canvas.width = canvas.height = 800;
  28.   var context = canvas.getContext('2d');
  30.   fillmoon(context, 1.2, 400, 400, 300, 30);
  31. };

三次贝塞尔曲线

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

Canvas Bézier Curve Example

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

文字渲染

文字渲染基础

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

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

文本对齐

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

文本的度量

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

Canvas高级内容

阴影

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

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

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');
  7.   context.beginPath();
  8.   context.fillStype = "#000";
  9.   context.fillRect(0, 0, canvas.width, canvas.height);
  11.   context.beginPath();
  12.   context.fillStyle = "#fff";
  13.   context.arc(canvas.width / 2, canvas.height / 2, 200, 0, Math.PI * 2);
  14.   context.fill();
  15.   context.clip();
  17.   context.font = "bold 150px Arial";
  18.   context.textAlign = 'center';
  19.   context.textBaseline = 'middle';
  20.   context.fillStyle = '#058';
  21.   context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);
  22. };

路径方向和剪纸效果

非零环绕原则

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

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;
  8.   for (var i = 0; i < 10; i++) {
  9.     var aBall = {
  10.       x: Math.random() * canvas.width,
  11.       y: Math.random() * canvas.height,
  12.       r: Math.random() * 50 + 20
  13.     };
  14.     balls[i] = aBall;
  15.   }
  16.   draw();
  17.   canvas.addEventListener("mouseup", detect);
  18. };
  20. function draw() {
  21.   for (var i = 0; i < balls.length; i++) {
  22.     context.beginPath();
  23.     context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI*2);
  24.     context.fillStyle = '#058';
  25.     context.fill();
  26.   }
  27. }
  29. function detect(event) {
  30.   var x = event.clientX - canvas.getBoundingClientRect().left;
  31.   var y = event.clientY - canvas.getBoundingClientRect().top;
  32.   for(var i = 0; i < balls.length; i++) {
  33.     context.beginPath();
  34.     context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
  35.     if (context.isPointInPath(x, y)) {
  36.       context.fillStyle = 'red';
  37.       context.fill();
  38.     }
  39.   }
  40. }

Canvas图形库

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