<template>
<div class="test" style="position: relative;">
<canvas id="myCanvas" ref="myCanvas" width="460" height="240">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<div class="myslot">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name:"",
components: {},
props: {},
data() {
return {
};
},
watch: {},
computed: {},
methods: {
init(){
// var c=document.getElementById("myCanvas");
// let canvas = document.getElementById("myCanvas");
const canvas = this.$refs.myCanvas
console.log(canvas)
var ctx = canvas.getContext("2d");
//460*240
ctx.beginPath();
ctx.moveTo(0,240); //l-竖线
ctx.lineTo(0,60); //l-斜线-s
ctx.lineTo(30,0); //l-斜线-e
ctx.lineTo(320,0); //t-横线
ctx.lineTo(350,30);//r-斜线
ctx.lineTo(460,30);//r-横线
ctx.lineTo(460,150);//r-竖线
ctx.lineTo(460,220);//r-b-斜线-s
ctx.lineTo(440,240);//r-b-斜线-e
// ctx.lineTo(0,240);
var gnt1 = ctx.createLinearGradient(0, 0, 200, 100); //线性渐变的起止坐标
gnt1.addColorStop(1, '#5DB2BA'); //创建渐变的开始颜色,0表示偏移量,相对位置,最大为1
ctx.lineWidth = 2;
ctx.strokeStyle = gnt1;
// ctx.fillStyle="#B8DEEC";
// ctx.fill();
// ctx.clearRect(0,0,20,20)
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,200);
ctx.lineTo(20,60);
ctx.lineTo(40,20);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(340,0); //r-t-斜线-s
ctx.lineTo(360,20);
ctx.lineTo(460,20);
ctx.stroke();
}
},
created() {
},
mounted() {
this.init()
}
};
</script>
<style lang="scss" scoped>
.myslot{
position: absolute;
top: 20px;
left: 48px;
// width: 163px;
height: 69px;
color: #00d8db;
// background: #5DB2BA;
}
</style>
canvas画不规则图形
最新推荐文章于 2024-08-30 11:04:59 发布