canvas基础使用

创建一个画布canvas

<canvas id="canvas" width="400px" height="400px">浏览器版本过低</canvas>

通过js实现基础绘画功能

获取canvas并获取canvas上下文
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')

了解画图实现过程及基本语法
ctx.beginPath() // 开始
ctx.moveTo(x1, y1) // 起点坐标
ctx.lineTo(x2, y2) // 终点坐标
ctx.strokeStyle = color // 着色之前设置颜色
ctx.lineWidth = width // 设置线宽
ctx.stroke() // 着色
ctx.closePath() // 结束

封装画图功能
function drawLine(x1, y1, x2, y2, color, width) {
  ctx.beginPath() // 开始
  ctx.moveTo(x1, y1) // 起点坐标
  ctx.lineTo(x2, y2) // 终点坐标
  ctx.strokeStyle = color // 着色之前设置颜色
  ctx.lineWidth = width // 设置线宽
  ctx.stroke() // 着色
  ctx.closePath() // 结束
}

1. 画直线
  drawLine(40, 40, 200, 40, 'red', 1)
2. 画矩形
  drawLine(40, 40, 320, 40, 'red', 1)
  drawLine(320, 40, 320, 360, 'green', 1)
  drawLine(320, 360, 40, 360, 'blue', 1)
  drawLine(40, 40, 40, 360, 'pink', 1)
或者
ctx.fillRect(x, y, width, height)
3. 画虚线
  for (let i = 0; i < 20; i++) {
    // 直虚线
    drawLine(ctx, (i * 2) * 10, 100, (i * 2 + 1) * 10, 100, 'green', 4)
    // 斜虚线
    drawLine(ctx, (i * 2) * 10, (i * 2) * 10, (i * 2 + 1) * 10, (i * 2 + 1) * 10, 'green', 4)
  }
4. 画随机柱状图
drawLine(ctx, 50, 50, 50, 300, '#000', 1)
drawLine(ctx, 50, 300, 360, 300, '#000', 1)
 
 // ctx.fillRect(100, 200, 20, 100) // x y width length

 for (let i = 0; i < 6; i++) {
   var height = Math.random() * 240 + 10 // [10, 250)
   ctx.fillRect((40 * i) + 100, (300 - height), 20, height)
 }
 4. 画圆
 ctx.arc(200, 200, 100, 0, Math.PI * 2, true)

  ctx.fillStyle = 'pink'
  ctx.fill()

  ctx.lineWidth = 10
  ctx.strokeStyle = '#e00'
  ctx.stroke()

直线：

矩形

虚线

随机矩形

圆