canvas 绘制一个三角形

    科技2022-08-03  98

    代码: 

    <template> <div class="div"> <canvas id="tutorial3" width="350" height="350"></canvas> </div> </template> <script> export default { data() { return {}; }, mounted() { var canvas = document.getElementById("tutorial3"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // 获得上下文对象(画笔) ctx.beginPath(); ctx.moveTo(10,10) ctx.lineTo(200,10) ctx.lineTo(100,100) ctx.lineTo(10,10) // ctx.closePath() ctx.stroke(); // stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 } }, }; </script> <style lang='scss' scoped> </style>

    效果:

    Processed: 0.010, SQL: 8