Canvas绘图学习

Canvas绘图学习

看的慕课网视频：视频链接 >_<

创建Canvas

<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa; 
  display:block; margin:50px auto;">当前浏览器不支持Canvas</canvas>

<script>
'use strict';
window.onload = function() {
  //接口
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  //这种方法也可以指定canvas大小
  canvas.width = 1024;
  convas.height = 768;
  //js判断是否支持
  if(canvas.getContext("2d")) {
    var context = convas.getContext("2d");
    //使用context绘制

  } else {
    alert("Don't surport canvas")
  }
}
</script>

直线

beginPath方法类似于开启新的路径绘画或清空已有路径 ，而closePath并不是用来表示结束 而是功能性的 做图形闭合处理（从最后的状态点自动lineTo回归起始点封口）

//基于状态的绘图
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
//着色
// context.fillStyle = 'rgb(2, 100, 30)';
// context.fill();
context.lineWidth = 5;
//改变颜色
context.strokeStyle = "#005588";
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.strokeStyle = "black";
context.stroke();

绘制七巧板：

var tangram = [
  {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
  {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
  {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
  {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
  {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
  {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
  {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"}
]
window.onload = function() {
  var canvas = document.getElementById("canvas");
  canvas.width = 800;
  canvas.height = 800;
  var context = canvas.getContext("2d");
  for(var i=0;i<tangram.length;i++) {
    draw(tangram[i], context);
  }
}
function draw(piece, cxt) {
  cxt.beginPath();
  cxt.moveTo(piece.p[0].x, piece.p[0].y);
  for(var i=1;i<piece.p.length;i++) {
    cxt.lineTo(piece.p[i].x, piece.p[i].y);
  }
  cxt.closePath();
  cxt.fillStyle = piece.color;
  cxt.fill();
  //Add border
  cxt.strokeStyle = "#000";
  cxt.lineWidth = 3;
  cxt.stroke();
}

圆弧

context.lineWidth = 5;
context.strokeStyle = "#005588";
//arc(center x,center y,redius,angleStart,angleEnd,anticlockwise=false)
// context.arc(300, 300, 200, 0, 0.5*Math.PI);
// context.stroke();
for(var i=0;i<10;i++) {
  context.beginPath();
  context.arc(50+i*100, 60, 40, 0, 2*Math.PI*(i+1)/10);
  context.closePath();
  context.stroke();
}
for(var i=0;i<10;i++) {
  context.beginPath();
  context.arc(50+i*100, 180, 40, 0, 2*Math.PI*(i+1)/10);
  context.stroke();
}
context.fillStyle = "#005588";
for(var i=0;i<10;i++) {
  context.beginPath();
  context.arc(50+i*100, 300, 40, 0, 2*Math.PI*(i+1)/10);
  context.stroke();
  context.fill();
}

倒计时实例

全部代码托管在github上：github地址
主要js代码：

'use strict';
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date(2018,0,24,23,0,0);
var curShowTimeSeconds = 0;

var balls = [];

const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00",
  "#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload = function() {

  WINDOW_WIDTH = document.documentElement.clientWidth-20;
  WINDOW_HEIGHT= document.documentElement.clientHeight-20;

  MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
  RADIUS = Math.round(WINDOW_WIDTH*4/5/108)-1;
  MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  canvas.width = WINDOW_WIDTH;
  canvas.height = WINDOW_HEIGHT;

  curShowTimeSeconds = getCurrentShowTimeSeconds();
  // render(context);
  setInterval(
    function () {
      render(context);
      update();
    }
    ,
    30 //millisecond
  );
}

function update() {
  //时间的改变
  var nextShowTimeSeconds = getCurrentShowTimeSeconds();
  var nextHours = parseInt(nextShowTimeSeconds/3600);
  var nextMinutes =parseInt((nextShowTimeSeconds-nextHours*3600)/60);
  var nextSeconds = nextShowTimeSeconds%60;

  var curHours = parseInt(curShowTimeSeconds/3600);
  var curMinutes =parseInt((curShowTimeSeconds-curHours*3600)/60);
  var curSeconds = curShowTimeSeconds%60;

  //产生彩色小球
  if(nextSeconds != curSeconds) {
    if(parseInt(curHours/10) != parseInt(nextHours/10)) {
      addBalls(MARGIN_LEFT+0, MARGIN_TOP, parseInt(curHours/10));
    }
    if(parseInt(curHours%10) != parseInt(nextHours%10)) {
      addBalls(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(curHours%10));
    }
    if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)) {
      addBalls(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));
    }
    if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)) {
      addBalls(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));
    }
    if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)) {
      addBalls(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));
    }
    if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)) {
      addBalls(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));
    }

    curShowTimeSeconds = nextShowTimeSeconds;
  }

  updateBalls();

  console.log(`balls number: ${balls.length}`);
}

function updateBalls() {
  for(var i=0;i<balls.length;i++) {
    balls[i].x += balls[i].vx;
    balls[i].y += balls[i].vy;
    balls[i].vy += balls[i].g;

    if(balls[i].x+RADIUS<0 || balls[i].x-RADIUS>WINDOW_WIDTH) {
      balls.splice(i, 1);
    }
    else if(balls[i].y >= WINDOW_HEIGHT-RADIUS) {
      balls[i].y = WINDOW_HEIGHT-RADIUS;
      balls[i].vy = -balls[i].vy*0.75;
    }
  }

}

function addBalls(x, y, num) {
  for(var i=0;i<digit[num].length;i++) {
    for(var j=0;j<digit[num][i].length;j++) {
      if(digit[num][i][j] == 1) {
        var aBall = {
          x:x+(RADIUS+1)*(j*2+1),
          y:y+(RADIUS+1)*(i*2+1),
          g:1.5+Math.random(),
          vx:Math.pow(-1, Math.ceil(Math.random()*1000))*4,
          vy:-5,
          color: colors[Math.floor(Math.random()*colors.length)]
        }
        balls.push(aBall);
      }
    }
  }
}

function getCurrentShowTimeSeconds() {
  var curTime = new Date();
  var ret = endTime.getTime() - curTime.getTime();
  ret = Math.round(ret/1000);

  return ret>=0?ret:0;
}

function render(cxt) {
  cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
  var hours = parseInt(curShowTimeSeconds/3600);
  var minutes =parseInt((curShowTimeSeconds-hours*3600)/60);
  var seconds = curShowTimeSeconds%60;
  // console.log(`h: ${hours} m: ${minutes} s: ${seconds}`);

  renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
  renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
  renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, parseInt(10), cxt);
  renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
  renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
  renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, parseInt(10), cxt);
  renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
  renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt);

  for(var i=0;i<balls.length;i++) {
    cxt.fillStyle = balls[i].color;
    cxt.beginPath();
    cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI, true);
    cxt.closePath();
    cxt.fill();
  }
}

function renderDigit(x, y, num, cxt) {
  cxt.fillStyle = "rgb(0, 102,153)";

  for(var i=0;i<digit[num].length;i++) {
    for(var j=0;j<digit[num][i].length;j++) {
      if(digit[num][i][j] == 1) {
        cxt.beginPath();
        cxt.arc(x+(RADIUS+1)*(j*2+1), y+(RADIUS+1)*(i*2+1), RADIUS, 0, 2*Math.PI);
        cxt.closePath();

        cxt.fill();
      }
    }
  }
}

效果如图：