给出一组数，使其显示在浏览器中以坐标轴的形式连接成线。
给出一组可修改的数。编号为1到50.比如1对应10,2对应12,3对应5.将其显示在坐标轴中，x坐标即为1到50，纵坐标为对应的数字，可以取到50个点，将这些点依次连成线。并且当数字变化的时候图像也发生变化。
通俗点说就是，奥运金牌榜横坐标为国家纵坐标为奖牌数。连成线看到起伏变化的效果。当第2天金牌数发生变化是图像也会变化 。 在浏览器中显示。
求各位大哥帮帮忙。我的工作啊。
电光之幻影
12 years, 6 months ago
Answers
给你贴一下HTML5 canvas绘图会用到的函数和说明； 然后还有我改过的一个例子供你参考
1、clecrRect(left,top,width,height) 清除制定矩形区域，
2、fillRect(left,top,width,height) 绘制矩形，并以fillStyle填充。
3、fillText（text,x,y） 绘制文字；
4、strokeRect(left,top,width,height) 绘制矩形，以strokeStyle绘制边界。
5、beginPath(): 开启路径的绘制,重置path为初始状态；
6、closePath(): 绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线；
7、moveTo（x，y）： 设置绘图其实坐标。
8、lineTo(x，y); 绘制从当前其实位置到x，y直线。
9、fill（），stroke（），clip（） 在完成绘制的最后的填充和边界轮廓，剪辑区域。
10、arc（）： 绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小；
11、rect(): 矩形路径;
12、drawImage（Imag img）： 绘制图片；
13、quadraticCurveTo(): 二次样条曲线路径,参数两个控制点；
14、bezierCurveTo（）： 贝塞尔曲线，参数三个控制点；
15、translate（x,y）： 平移变换，原点移动到坐标（x，y）；
16、rotate（a）： 旋转变换，旋转a度角；
17、scale（x，y）： 伸缩变换；
18、save（），restore（）：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态；
<!doctype html>
<html>
<head>
<script type="text/javascript" src="stat.js">
</script>
<script type="text/javascript">
//写上数字
function writeFont(ctx,myList)
{
for(var i=0;i<(myList.length-10);i++)
{
countAngel=0;
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
for(var j=0;j<=i;j++)
{
if(i==j)
countAngel+=Math.PI*2*myList[j+10]/200;
else
countAngel+=Math.PI*2*myList[j+10]/100;
}
ctx.fillText(myList[i]+": "+myList[i+10]+"%", 100*Math.cos(countAngel)-20, 100*Math.sin(countAngel));
}
}
//获得填充的样式
function getColorStyle(ctx)
{
var r=Math.floor(Math.random()*230+20);
var g=Math.floor(Math.random()*230+20);
var b=Math.floor(Math.random()*230+20);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
}
//返回myList中最大的值
function getTheMax(myList)
{
var tmp=0;
for(var i=0;i<(myList.length-10);i++)
{
if(Number(tmp)<Number(myList[i+10]))
tmp=myList[i+10];
}
return tmp;
}
//画折线图
function drawBrokenLine(myList,x,y,width,height)
{
var mycanvas=document.createElement("canvas"); //自己创建一个canvas
mycanvas.style.cssText+=";border:1px solid #aaa"; //加上边框
mycanvas.width=width; //canvas的高度和宽度只能这么来设定，不能用style来设定
mycanvas.height=height;
document.body.appendChild(mycanvas);
mycanvas.style.position="absolute";
var ctx=mycanvas.getContext("2d");
//drawCoordinate(ctx);
ctx.translate(30,height-10);
ctx.font = "18px Times New Roman";
ctx.fillStyle = "Black";
ctx.lineWidth="3";
ctx.strokeStyle="black";
ctx.beginPath();
var mass=width/8;
ctx.fillText(myList[0],0,0);
//alert(-myList[10]/getTheMax(myList)*306)
ctx.moveTo(0,-myList[10]/getTheMax(myList)*306);
for(var i=1;i<(myList.length-10);i++)
{
ctx.lineTo(i*mass,Math.round(-myList[i+10]/getTheMax(myList)*306));
ctx.fillText(myList[i],i*mass,0);
}
ctx.stroke();
for(var i=0;i<(myList.length-10);i++)
{
ctx.beginPath();
ctx.arc(i*mass,Math.round(-myList[i+10]/getTheMax(myList)*306),5,0,Math.PI*2,false);
getColorStyle(ctx);
ctx.fill();
}
ctx.font = "12px Times New Roman";
ctx.fillStyle = "Black";
for(var i=0;i<9;i++)
{
ctx.fillText(Math.round(getTheMax(myList)/9*(i+1))+"%",-25,-34*(i+1));
}
mycanvas.style.cssText+=";width:"+width+"px;height:"+height+"px;left:"+x+"px;top:"+y+"px";
}
function init()
{
var myList=new Array();
myList[0]="1天";
myList[1]="2天";
myList[2]="3天";
myList[3]="4天";
myList[4]="5天";
myList[5]="6天";
myList[6]="7天";
myList[7]="8天";
myList[10]="8";
myList[11]="20";
myList[12]="12";
myList[13]="15";
myList[14]="25";
myList[15]="5";
myList[16]="10";
myList[17]="5";
drawBrokenLine(myList,100,10,600,500); //data,x,y,width,height
}
</script>
</head>
<body onload="init()">
<canvas id="pad" ></canvas>
</script>
</body>
</html>
MoRod
answered 12 years, 6 months ago