可视化基础

画布元素

canvash5新增
canvas地址

浏览器的坐标

直线

三角形

改变线条颜色

  // 设置线条颜色
  cxt.strokeStyle='red';
  // 设置线条宽度
  cxt.lineWidth=5;

改变每根线条的颜色， 重复此过程，把三根线连一起即可

  // 设置颜色
  cxt.strokeStyle='red';
  cxt.moveTo(20, 20)
  cxt.lineTo(150, 20)
  // 绘制
  cxt.stroke()
  // 重置当前路径
  cxt.beginPath();

文字

两者区别

文字对齐，文字对齐的坐标轴，是相对于文字绘制的坐标的

  context.textAlign='right';
  context.textBaseline='middle';

将canvas图形输出到控制台

  var imgUrl = cvs.toDataURL();
  console.log(imgUrl)

矩形

圆

  // 绘制圆
  context.arc(50, 50, 40,0, Math.PI / 180 * 360, true);
  // context.stroke();
  context.fill();

图片

  // 定义图片对象
  var img = new Image()
  img.src='./img/dog.jpg'
  img.onload = function () {
    // 绘制图片
    // context.drawImage(this, 10, 10);
    // 指定图片的宽高
    // context.drawImage(this, 10, 10, 122, 200);
    // 裁切放大图片
    context.drawImage(this, 120, 120, 100, 100, 10, 10, 300, 300);
  }

刮刮卡