canvas系列---【vue和原生js中canvas图形的绘制】
一 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");
// 重复获取dom节点
this.$nextTick(()=>{
domCan = document.getElementById("mycanvas");
if(!domCan){
return false
}else{
// 添加点击事件
domCan.onclick=()=>{
console.log('aaaaa');
}
var context = domCan.getContext("2d");
context.clearRect(0,0,width,height) // 清除上一次的画布
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>
浙公网安备 33010602011771号