数据可视化: 绘制简单图形

1. 画线

  <canvas id="canvas" width="300" height="300"></canvas>

  <script>
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');
    ctx.moveTo(30, 30) // 定位开始点
    ctx.lineTo(90, 30) // 拖动并结束点
    ctx.stroke() // 绘制点
  </script>

2. 绘制三角形
   // 给三个点的坐标

  <canvas id="canvas" width="300" height="300"></canvas>

  <script>
	let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');
    ctx.strokeStyle = 'red' // 线条颜色
    ctx.lineWidth = 5; // 线条宽度
    ctx.moveTo(50, 50) // 定位开始点
    ctx.lineTo(150, 150)
    ctx.lineTo(80, 130)
    // ctx.lineTo(50, 50)
    ctx.closePath() // 形成闭合路径
    ctx.stroke() // 绘制点

  </script>

3. 绘制不同颜色的三角形
   // beginPath重置了路径，画了三段线条

  <canvas id="canvas" width="300" height="300"></canvas>

  <script>
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red' // 线条颜色
    ctx.lineWidth = 5; // 线条宽度
    ctx.moveTo(50, 50) // 定位开始点
    ctx.lineTo(150, 150)
    ctx.stroke() // 绘制线条
    ctx.beginPath()

    ctx.strokeStyle = 'blue'
    ctx.moveTo(150, 150)
    ctx.lineTo(80, 130)
    ctx.stroke()
    ctx.beginPath()

    ctx.strokeStyle = 'yellow'
    ctx.moveTo(80, 130)
    ctx.lineTo(50, 50)
    ctx.stroke()

  </script>

4. 绘制文字

<canvas id="canvas" width="300" height="300"></canvas>

  <script>
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');
    ctx.font = 'bold 32px 黑体' // 设置字体样式
    ctx.textAlign = 'left' // 水平对齐 left center right
    ctx.textBaseline = 'top' // 垂直对齐 top middle bottom

    ctx.fillText('50%', 50, 50) 
    // ctx.fillText('50%', 50, 50, 40) // 后面的参数限制文字宽度
    ctx.strokeText('50%', 100, 100) // 描边的文字
    

  </script>

5. 将绘制的内容生成图片

  <canvas id="canvas" width="300" height="300"></canvas>

  <script>
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');
    ctx.font = 'bold 32px 黑体' // 设置字体样式

    ctx.fillText('50%', 50, 50)
    let imgUrl = ctx.toDataURL('image/png', 1) // 得到base64的图片, 0-1为图片质量
    console.log(imgUrl)
    

  </script>

6. 绘制矩形

7. 绘制图片

只有三种参数

(图片, 开始裁剪的x坐标，开始裁剪的y坐标, 裁剪图像的宽度, 裁剪图像的高度, 放在画布上的x左边, 放在画布上的y坐标, 图像要显示的宽， 图像要显示的高 )	// void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
(图片,放在画布上的x坐标, 放在画布上的y坐标,图像要显示的宽， 图像要显示的)	void ctx.drawImage(image, dx, dy, dWidth, dHeight);
(图片,放在画布上的x坐标, 放在画布上的y坐标,)	void ctx.drawImage(image, dx, dy);

ctx.drawImage(img, -canvasWidth, -canvasWidth)