Canvas基础笔记（二）

之前整理了一点 Canvas 的基础知识 HTML5揭秘读书笔记——Canvas ，本篇继续补充一些基础知识

PS: 之前在markdown文件添加视频的时候在网上复制了一段html代码，也用过来截断文章，一直没太注意，今天发现大多数解析器大都是可以支持html的，所以记录效果的时候直接写html代码就可以渲染出结果，非常棒，需要写个<canvas>标签，然后再写个<script>标签，然后在标签中使用window.onload一顿操作就可以了

不过有缺点，兼容性会降低，测试了几个在线mardown编辑器都无法解析，我使用的remarkable本地编辑器和pelican编译后可以正常显示，如非网页效果展示类文章还是尽量不要引入过多的html代码

Base HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>html5 canvas</title>
</head>
<body>
<canvas id="canvas" width="320" height="200"  style="border: 1px dashed;">
</canvas>
</body>
</html>

圆和半圆

window.onload = function() {
  var canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");

  // 左上
  context.beginPath();
  context.arc(80, 50, 30, 0, Math.PI);
  context.stroke();

  // 右上
  context.beginPath();
  context.arc(240, 50, 30, 0, Math.PI * 2);
  context.closePath();
  context.strokeStyle = "green";
  context.stroke();

  // 中
  context.beginPath();
  context.arc(160, 80, 30, 0, Math.PI);
  context.strokeStyle = "#8C7676";
  context.closePath();
  context.stroke();

  // 左下
  context.beginPath();
  context.arc(80, 150, 30, 0, Math.PI * 2);
  context.closePath();
  context.fillStyle = "#99B0C2";
  context.fill();

  // 右下
  context.beginPath();
  context.arc(240, 150, 30, 0, Math.PI, true);
  context.strokeStyle = "#aa0000";
  context.stroke();
}

效果：

输出Sin()函数

window.onload = function() {
  var canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");

  // 横线
  context.beginPath();
  context.moveTo(0, 100);
  context.lineTo(320, 100);
  context.stroke();

  context.beginPath();
  context.moveTo(0, 100);

  for(var x = 0; x <320; x++) {
    var y = 100 + Math.sin(x * 0.02) * 100;
    console.log(x);
    console.log(y);
    context.lineTo(x, y);
  }
  context.stroke();
}

效果：

描边与填充

如下代码展示的是四个正方形描边填充的效果，演示图我设置了增长的边框宽度

// 设置边框宽度
context.lineWidth = lw;

// 左上
context.beginPath();
context.rect(55, 25, 50, 50);
context.stroke();

// 右上
context.beginPath();
context.rect(215, 25, 50, 50);
context.fill();

// 左下
context.beginPath();
context.rect(55, 125, 50, 50);
context.stroke();
context.fill();

// 右下
context.beginPath();
context.rect(215, 125, 50, 50);
context.fill();
context.stroke();

效果：

边缘效果

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  // 边缘形状
  context.lineCap = "round";
  // context.lineCap = "square";

  // 链接处形状
  // context.lineJoin = "bevel";
  context.lineJoin = "miter";
  // context.lineJoin = "round";
  // context.miterLimit = "3";


  context.lineWidth = 10;
  context.strokeStyle = "#FFDD83";
  draw();

  context.lineWidth = 1;
  context.strokeStyle = "#405983";
  draw();

  function draw() {
    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(100, 100);
    context.stroke();

    context.beginPath();
    context.moveTo(180, 50);
    context.lineTo(200, 100);
    context.lineTo(220, 50);
    context.stroke();

    context.beginPath();
    context.strokeRect(100, 130, 30, 30);
  }
}

效果：

圆形迳向渐变

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  var gradient = context.createRadialGradient(120, 80, 0, 110, 90, 70);
  gradient.addColorStop(0, "white");
  gradient.addColorStop(1, "black");

  context.fillStyle = gradient;
  context.beginPath();
  context.arc(100, 100, 50, 0, Math.PI * 2, false);
  context.fill();
}

效果：