本文实例为大家分享了用chart.js添加动态背景图的具体代码，供大家参考，具体内容如下
1.效果图：
2.HTML
<div class="background-image"> <canvas id="drawing"> </canvas> </div>
2.Javascript
function drawBar(){
var drawing=document.getElementById("drawing");
var ctx=drawing.getContext("2d");
var data = {
labels: produceLabels(20),
datasets: [
{
label:"",
borderWidth: 1,
data:produceRandom(20),
}
]
};
var options={
scales:{
xAxes:[{
display:false
}],
yAxes:[{
display:false
}]
},
tooltips:{
enabled:false
},
legend:{
display:false
}
};
var parameters={
type:"bar",
data:data,
options:options
}
new Chart(ctx,parameters);
}
var num=0;
var max=1000;
function setBackground(){
num ;
drawBar()
if(num<max)
{
window.setTimeout(setBackground,3000);
}
}
setBackground();
//生成随机数
function produceRandom(len){
var random_array=[];
for(var i=0;i<len; i)
{
random_array.push(Math.random()*100 1);
}
return random_array;
}
function produceLabels(len){
var label_array=[];
for(var i=0;i<len; i)
{
label_array.push("");
}
return label_array;
}是不是超级简单呢！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。