<template>
<div class="contain">
<canvas width="600" height="400"></canvas>
</div>
</template>
<script>
export default {
mounted(){
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d');
ctx.lineWidth=20;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();//beginpath是开启新路径,但上面的
//lineWidth和lineCap仍然对下面的路径有效,而下面的lineWidth和lineCap对上面的路径无效
ctx.lineCap='round'
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.stroke();//每一条新路径都要重新stroke描边
ctx.beginPath();
ctx.lineCap='square'
ctx.moveTo(100,300);
ctx.lineTo(200,300);
ctx.stroke();
}
};
</script>
<style lang="scss">
canvas{
border:1px solid #ccc;
}
</style>
stroke beginPath三条平行线canvas
最新推荐文章于 2021-04-25 18:53:01 发布