1. 需求及效果

在看高德API时，发现有一个polyline组件，通过接收点的坐标数组，来绘制折线，正在看canvas API，就让我们一起试试吧。

2. 实施

思路：首先子组件需要接收父组件传递进来的点的数组，根据canvas API中的moveTo/lineTo/stroke来进行绘制

2.1 封装子组件

<template><div class="polylinecanvas"><canvas id="polyline" :width="ctxWidth" :height="ctxHeight"></canvas></div>
</template>
<script>
export default {props: {points: Array,},data() {return {receiveProps: [],// 设置幕布的宽高，避免出现因canvas画布分布太远超出范围而隐藏ctxHeight: 0,ctxWidth: 0,};},methods: {findMaxPoint() {this.points.forEach((v) => {if (v[0] > this.ctxWidth) {this.ctxWidth = v[0];}if (v[1] > this.ctxHeight) {this.ctxHeight = v[1];}});},drawPolyLine() {// 根据横竖坐标的最大值，设立canvas宽高，避免内容无法显示的问题this.receiveProps = this.points;let canvas = document.getElementById("polyline");if (canvas.getContext) {let ctx = canvas.getContext("2d");// 开始画图ctx.beginPath();// 画折线第一笔 moveTo 将画笔移动至首发点位置let firstPoint = this.points[0].flat();ctx.moveTo(firstPoint[0], firstPoint[1]);// 画折线剩余步骤，lineTo移动折线到指定位置// 剩余数组，用于化lineTo到不同的点let resArr = this.receiveProps.slice(1, this.points.length);resArr.forEach((v) => {let curPoint = v.flat();ctx.lineTo(curPoint[0], curPoint[1]);});// 设置折线颜色ctx.strokeStyle="red"// 设置填充颜色ctx.fillStyle="gold"// 填充线条ctx.stroke();// 绘制填充内容ctx.fill();}},},beforeDestroy() {// this.ctx = null;},async mounted() {if (this.points.length) {await this.findMaxPoint();await this.drawPolyLine();}},
};
</script>

2.2 在父组件中使用并传值

<template><div class="polyinecanvas"><PolylineCanvas :points="pointsLine" /></div>
</template>
<script>
import PolylineCanvas from '../components/PolylineCanvas.vue';
export default {components:{PolylineCanvas,},data(){return {pointsLine:[[100,0],[159,181],[5,69],[195,69],[41,181],[100,0],]}}
}
</script>

3. API阐述

beginPath() 新建一条路径
moveTo(x,y) 将画笔移动至起始点处
lineTo(x,y) 向下一个点开始画线
stroke() 线条形式
fill() 绘制实心
fillStyle=“red” 填充红色
strokeStyle=“gold” 折线金黄色

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

Vue实例——使用canvas封装polyline组件绘制一个五角星相关推荐

canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
用Canvas在SurfaceView上绘制一个雷达扫描动画
用Canvas在SurfaceView上绘制一个雷达扫描动画目录用Canvas在SurfaceView上绘制一个雷达扫描动画目录为什么选择SurfaceView 准备工作构建MySurfac ...
使用python turtle库绘制一个三角形和一个五角星_使用turtle库绘制一个五角星如何采用Python语言绘制一个五角星...
如何采用Python语言绘制一个五角星 #./usr/bin/env python import turtle import time turtle.forward(100) turtle.right ...
绘制一个五角星和六角形
绘制一个五角星.(注:并在顶端加上:"我爱你中国"这几个字) 代码为: import turtle turtle.fillcolor("red") turtle ...
python绘制红色五角星、边长100像素_使用turtle库绘制一个五角星
如何采用Python语言绘制一个五角星 #./usr/bin/env python import turtle import time turtle.forward(100) turtle.right ...
在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子
思路 1.在画布上创建一个2d画笔,并用这个画笔在画布上绘制一个矩形. 2.设置一个边界判断使这个盒子不能移出画布之外,只能在画布中移动. 注意: 不能直接在style中设置canvas的大小直接设 ...
android canvas drawrect画图,为什么在android中调用canvas.drawRect时只绘制一个矩形？
我正在尝试使用foreach循环为ArrayList中的每个字符串绘制一个矩形,但它似乎只绘制了最后一个矩形. 我看过类似的问题,但他们遇到的问题包括矩形底部高于顶部并调用drawPaint - 但我 ...
用php绘制一个五角星,用CAD简单绘制一个立体五角星方法
随着人均受教育的水平越来越高,或者说工科男越来越多...CAD在的应用在目前越来越大众化,大到建筑.机械的设计,小到简单图形的绘制及导出,都离不开CAD的身影,这里我主要通过一个绘制五角星的实例来讲解 ...
如何用css绘制一个五角星并添加旋转动画
关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬 ...

Vue实例——使用canvas封装polyline组件绘制一个五角星

1. 需求及效果

2. 实施

2.1 封装子组件

2.2 在父组件中使用并传值

3. API阐述

Vue实例——使用canvas封装polyline组件绘制一个五角星相关推荐

最新文章

热门文章