1024程序员节，OpenHarmony Meetup，技术盛宴，不见不散
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY leftMargin=0 topMargin=0>
<table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="111" align="center">
<div><canvas id="canvas1" width="500" height="500" style="display:none;></canvas></div>
<div id="img" width="500" height="500"></div>
<script src="js/Chart.min.js"></script>
<script>
var ctx = document.getElementById("canvas1").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line', // line 表示是 曲线图，当然也可以设置其他的图表类型 如柱形图 : bar 或者其他
data: {
labels : ["1","2","3","4","5"], //按时间段 可以按星期，按月，按年
datasets : [
{
label: "123", //当前数据的说明
fill: true, //是否要显示数据部分阴影面积块 false:不显示
borderColor: "rgba(200,187,205,1)",//数据曲线颜色
pointBackgroundColor: "#fff", //数据点的颜色
data: [20, 30, 40, 30, 50], //填充的数据
},
]
}
});
//从 canvas 提取图片 image
function convertCanvasToImage(canvas1) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 PNG
image.src = canvas1.toDataURL("image/png");
return image;
}
//获取网页中的canvas对象,存在问题：应该是无法获取到canvas对象
var mycans=document.getElementById("canvas1").getContext("2d");
//调用convertCanvasToImage函数将canvas转化为img形式
var img=convertCanvasToImage(mycans);
//将img插入容器
$('#img').append(img);
</script>
</td>
</tr>
</table>
</BODY></HTML>
