标签：canvas vue max arr js xLen context var mycanvas
一 js原生实现canvas画图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h2>line canvas</h2>
<canvas id="mycanvas" width="100" height="50" style="border: 1px solid #ccc;"></canvas>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
window.onload = function(){
var arr = [40,50,30,70,80,40,90,60,80,60,69,80,60]
drawLine.minCurve(arr)
}
var drawLine = {};
!function(){
// 求数据最大值
Array.prototype.max = function(){
var max = this[0];
var len = this.length;
for (let i = 1; i < len; i++) {
if(this[i]>max){
max = this[i]
}
}
return max
}
function draw(arr){
var width = 100,height=50;
var maxV = arr.max();
// 计算y轴增量
var yStep = height/maxV
var domCan = document.getElementById("mycanvas")
var context = domCan.getContext("2d")
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#395b73";
// context.moveTo(0,0) //开始画图的位置
var x_space = width/(arr.length - 1);//水平点的间隙像素
// x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
// context.lineTo(15,60);
var xLen = 0;
for (let i = 0; i < arr.length; i++) {
var yValue = arr[i];//纵坐标值
xLen += x_space;
var yPont = height -yValue*yStep
if(i = 0){
xLen = 0;
}
var m = xLen + ','+ yPont;
context.lineTo (xLen,yPont)
}
context.stroke();
context.closePath();
}
drawLine.minCurve = draw;
}()
</script>
</body>
</html>
二 vue + render+ canvas 绘制图形
<template>
<div>
<!-- 这是table -->
<table ref="searchPage">
........// 此处结构省略
</table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格的配置项
labelArr: [
{ label: "姓名", field: "name", minwidth: 90 },
{
label: "近半月趋势缩略图",
field: "sub",
render: (row) => {
return `<canvas
id="mycanvas" width="100" height="50"
style="border: 1px solid #ccc;">
</canvas>`;
},
},
// {.......} // 此处配置省略
],
arr: [],
};
},
mounted() {
// 在数据原型上绑定求最大值规则,求数据最大值
Array.prototype.max = function () {
var max = this[0];
var len = this.length;
for (let i = 1; i < len; i++) {
if (this[i] > max) {
max = this[i];
}
}
return max;
};
this.canvasData();
},
methods: {
async canvasData() {
// 展示的数据
this.arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 60];
let mycanvas = "mycanvas";
// 先获取表格的数据,获取数组长度,根据长度调用几次画布方法
let res = await this.$refs["searchPage"].tableData();
for (let i = 0; i < res.data.length; i++) {
mycanvas = `mycanvas${i}`;
// 因为canvas是动态渲染的,通过for循环arr的长度把每条数据的索引拼接在id上生成不同的id,传给draw方 // 法画出多个图形
this.draw(this.arr, mycanvas);
}
},
// canvas绘制方法
draw(arr, mycanvas) {
var width = 100,
height = 50;
var maxV = arr.max();
// 计算y轴增量
var yStep = height / maxV;
var domCan = document.getElementById("mycanvas");
var context = domCan.getContext("2d");
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#395b73";
// context.moveTo(0,0) //开始画图的位置
var x_space = width / (arr.length - 1); //水平点的间隙像素
// context.lineTo(15,60); // x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
var xLen = 0;
for (let i = 0; i < arr.length; i++) {
var yValue = arr[i]; //纵坐标值
xLen += x_space;
var yPont = height - yValue * yStep;
if ((i = 0)) {
xLen = 0;
}
// var m = xLen + "," + yPont;
context.lineTo(xLen, yPont);
}
context.stroke();
context.closePath();
},
},
};
</script>
<style>
</style>
标签：canvas,vue,max,arr,js,xLen,context,var,mycanvas 来源： https://www.cnblogs.com/chenhaiyun/p/15872102.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。