使用canvas绘制一个三角形

绘制一个三角形的例子： 

<template>
  <div class> 
    <canvas id="tutorial2" width="150" height="150"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() { 
    var canvas2 = document.getElementById("tutorial2");
    if (canvas2.getContext) {
      var ctx2 = canvas2.getContext("2d"); // 获得上下文对象（画笔）
      ctx2.beginPath() // 新建一条路径
      ctx2.moveTo(10,10) // 画笔移动到（10,10）
      ctx2.lineTo(10,50) 
      ctx2.lineTo(30,25)
      ctx2.fill() // 通过填充路径的内容区域生成实心的图形。当你调用fill()函数时，所有没有闭合的形状都会自动闭合，
                  // 所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
    }
  }, 
};
</script>
<style lang="less" scoped>
</style>

效果：

 

当将 ctx2.fill()方法改成 ctx2.stroke()时，是通过线条来绘制图形轮廓。效果如下：