canvas绘制图形-demo

前言

• canvas 基础知识了解

在学习了canvas路径、图形的基础API后，可以以下面的例子，进行练习，加强理解

八卦图

var canv = document.querySelector('#drawing');
if (canv.getContext) {
  var context = canv.getContext('2d');

  context.beginPath();
  context.fillStyle = 'black';
  context.arc(100, 100, 100, Math.PI / 2, (Math.PI * 3) / 2);
  context.fill();

  context.beginPath();
  context.fillStyle = 'white';
  context.arc(100, 100, 100, (Math.PI * 3) / 2, Math.PI / 2);
  context.fill();

  context.beginPath();
  context.fillStyle = 'black';
  context.arc(100, 50, 50, (Math.PI * 3) / 2, Math.PI / 2);
  context.fill();

  context.beginPath();
  context.fillStyle = 'white';
  context.arc(100, 150, 50, Math.PI / 2, (Math.PI * 3) / 2);
  context.fill();

  context.beginPath();
  context.fillStyle = 'white';
  context.arc(100, 50, 20, 0, Math.PI * 2);
  context.fill();

  context.beginPath();
  context.fillStyle = 'black';
  context.arc(100, 150, 20, 0, Math.PI * 2);
  context.fill();
}

探照灯效果

var searchLight = { x: 400, y: 400, r: 150, vx: Math.random() * 5 + 10, vy: Math.random() * 5 + 10 };
window.onload = function () {
  var canv = document.getElementById('canvas');
  var ctx = canv.getContext('2d');

  setInterval(function () {
    draw(ctx);
    update(canv.width, canv.height);
  }, 40);

  function draw(ctx) {
    var canvas = ctx.canvas;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(searchLight.x, searchLight.y, searchLight.r, 0, Math.PI * 2);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.clip();

    ctx.font = 'bold 150px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseLine = 'middle';
    ctx.fillStyle = '#058';
    ctx.fillText('CANVAS', canvas.width / 2, canvas.height / 4);
    ctx.fillText('CANVAS', canvas.width / 2, canvas.height / 2);
    ctx.fillText('CANVAS', canvas.width / 2, (canvas.height * 3) / 4);

    ctx.restore();
  }

  function update(w, h) {
    searchLight.x += searchLight.vx;
    searchLight.y += searchLight.vy;
    if (searchLight.x <= searchLight.r) {
      searchLight.x = searchLight.r;
      searchLight.vx = -searchLight.vx;
    }
    if (searchLight.x >= w - searchLight.r) {
      searchLight.x = w - searchLight.r;
      searchLight.vx = -searchLight.vx;
    }
    if (searchLight.y <= searchLight.r) {
      searchLight.y = searchLight.r;
      searchLight.vy = -searchLight.vy;
    }
    if (searchLight.y >= h - searchLight.r) {
      searchLight.y = h - searchLight.r;
      searchLight.vy = -searchLight.vy;
    }
  }
};

螺旋图

var timer = null,
  times = 100,
  x = 20,
  y = 10;
function start() {
  var drawing = document.querySelector('#drawing');
  if (drawing.getContext) {
    var canvas = drawing.getContext('2d');
    canvas.fillStyle = 'rgba(45,175,233,0.25)';
    canvas.translate(150, 20);
    canvas.fillRect(0, 0, 100, 50);

    timer = setInterval(function () {
      times--;
      canvas.translate(++x, ++y);
      canvas.scale(0.95, 0.95);
      canvas.rotate(Math.PI / 10);
      canvas.fillRect(0, 0, 100, 50);
      if (times == 0) {
        clearInterval(timer);
        timer = null;
      }
    }, 100);
  }
}

弹力球

var canvas;
var x = 10,
  y = 10,
  r = 10,
  dx = 2,
  dy = 3; //小球从(0,0)开始移动，横向步长2，纵向步长3
  
function draw() {
  canvas.clearRect(0, 0, drawing.width, drawing.height);
  if (x + r > drawing.width || x - r < 0) {
    dx *= -1;
  }
  if (y + r > drawing.height || y - r < 0) {
    dy *= -1;
  }
  x += dx;
  y += dy;
  drawArc(x, y, r);
}

function drawArc(x, y, r) {
  canvas.fillStyle = 'red';
  canvas.beginPath();
  canvas.arc(x, y, r, 0, Math.PI * 2);
  canvas.fill();
}

window.onload = function () {
  var drawing = document.querySelector('#drawing');
  if (drawing.getContext) {
    canvas = drawing.getContext('2d');
    setInterval(draw, 20);
  }
};