可视化基础

画布元素

canvash5新增
canvas地址

浏览器的坐标

直线

<body>
  <canvas id="line" style="background-color: pink"></canvas>

  <script type="text/javascript">
  // 获取画布元素
  var line = document.getElementById('line')
  // 获取工具集
  var cxt = line.getContext("2d")
  // 定位开始点
  cxt.moveTo(22, 22)
  // 拖动并结束点
  cxt.lineTo(102, 22)
  // 绘制
  cxt.stroke()
  </script>

</body>

三角形

<body>
  <canvas id="line" style="background-color: pink"></canvas>

  <script type="text/javascript">
  // 获取画布元素
  var line = document.getElementById('line')
  // 获取工具集
  var cxt = line.getContext("2d")
  // 定位点
  cxt.moveTo(20, 20)
  cxt.lineTo(150, 20)
  cxt.lineTo(80, 80)
  
  cxt.closePath()

  // 绘制
  cxt.stroke()
  </script>

</body>

改变线条颜色

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

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

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

文字

<body>
  <canvas id="cvs" style="background-color: pink"></canvas>

  <script type="text/javascript">
  // 获取画布元素
  var cvs = document.getElementById('cvs')
  // 获取工具集
  var context = cvs.getContext("2d")

  // 文字样式
  context.font='bold 30px sans-serif';
  // 绘制文字
  context.fillText('text', 30, 30);
  context.strokeText('text', 30, 90);
  
  </script>

</body>

两者区别

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

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

将canvas图形输出到控制台

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

矩形

<body>
  <canvas id="cvs" style="background-color: pink"></canvas>

  <script type="text/javascript">
  // 获取画布元素
  var cvs = document.getElementById('cvs')
  // 获取工具集
  var context = cvs.getContext("2d")

  // 1.绘制路径
  // context.rect(30, 30, 50, 50);
  // 2.描边或填充
  // context.stroke();
  // context.fill()

  // 调用一次方法完成
  // context.strokeRect(30, 30, 50, 50);
  context.fillRect(30, 30, 50, 50);

  // 清空矩形内像素
  context.clearRect(30, 30, 50, 50);
  
  </script>

</body>

圆

  // 绘制圆
  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);
  }

刮刮卡

<body>
  <canvas id="cvs"></canvas>

  <script type="text/javascript">
  // 获取画布元素
  var cvs = document.getElementById('cvs')
  // 获取工具集
  var context = cvs.getContext("2d")

  // 1. 定义中奖信息
  var randomArr = ['一等奖', '二等奖', '三等奖', '没有奖']
  var random = randomArr[Math.floor(Math.random()*randomArr.length)]

  context.font='bold 30px sans-serif';
  context.textAlign = 'center'
  context.textBaseline='middle';
  context.fillStyle='red'; 

  context.fillText(random, cvs.width/2, cvs.height/2);
  
  // 2. 将中奖信息生成为背景图片，清空画布,绘制覆盖的矩形
  var imgUrl = cvs.toDataURL('iamge/png',1)
  cvs.style.background = 'url('+imgUrl+')'
  
  context.clearRect(0, 0, cvs.width, cvs.height);

  context.fillStyle='#666'
  context.fillRect(0, 0, cvs.width, cvs.height);
  
  // 3. 实现刮擦的效果
  var flag = false
  cvs.addEventListener('mousedown', function() {
    flag = true
    // 将刮擦过的区域设置为透明
    context.globalCompositeOperation='destination-out';
  })
  cvs.addEventListener('mousemove', function(e) {
    if(flag) {
      var x = e.clientX
      var y = e.clientY
      context.fillRect(x, y, 40, 40)
    }
  })
  cvs.addEventListener('mouseup', function() {
    flag = false
  })
  
  </script>

</body>

最后编辑于：2019.10.20 16:22:40