代码:
<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>
效果: