HTML5 Canvas 绘制库存变化折线增加超储告罄线

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>库存曲线</title></head><body onload="draw()"><canvas id="myCanvus" width="840px" height="240px" style="border:1px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body>
</html>
<script type="text/javascript">
<!--function draw(){var canvas=document.getElementById("myCanvus");var canvasWidth=840;var canvasHeight=240;var context=canvas.getContext("2d");context.fillStyle = "white";context.fillRect(0, 0, canvasWidth, canvasHeight);context.strokeStyle = "black";context.fillStyle = "black";context.save();// 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向var offset=20;// 偏移值，用来画坐标轴
context.save();context.translate(0+offset,canvasHeight-offset);context.rotate(getRad(180));context.scale(-1,1);        drawAxisX(context);drawAxisY(context);var actualStock=100;var inbounds=[50,0,50,0,50,0,50,0,50,0,90,0,90,0,90,0,90,0,];var outbounds=[0,70,0,70,0,70,0,70,0,70,0,70,0,70,0,70,0,70,];drawStockCurve(context,actualStock,inbounds,outbounds);drawBounds(context);context.restore();context.fillText("每日库存变化折线",400,50);context.fillText("库存",10,20);context.fillText("日期",800,235);}function drawBounds(ctx){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='red';// 画underage
        ctx.beginPath();ctx.moveTo(0, 25);ctx.lineTo(800, 25);ctx.stroke();ctx.closePath();ctx.save();ctx.translate(-10,25);ctx.rotate(getRad(180));ctx.scale(-1,1);ctx.fillText("告罄",0,0);ctx.restore();ctx.restore();ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='red';// 画underage
        ctx.beginPath();ctx.moveTo(0, 125);ctx.lineTo(800, 125);ctx.stroke();ctx.closePath();ctx.save();ctx.translate(-10,125);ctx.rotate(getRad(180));ctx.scale(-1,1);ctx.fillText("超储",0,0);ctx.restore();ctx.restore();}function drawStockCurve(ctx,actualStock,inbounds,outbounds){ctx.save();ctx.lineWidth=1;ctx.strokeStyle='black';ctx.fillStyle='black';var y=actualStock;var x;ctx.beginPath();for(var i=0;i<inbounds.length;i++){y=y+inbounds[i]-outbounds[i];x=i*50;ctx.lineTo(x, y);ctx.save();// 因坐标变换会导致文字错位，故采用位移+旋转+缩放的方式恢复
            ctx.translate(x,y);ctx.rotate(getRad(180));ctx.scale(-1,1);ctx.fillText("("+i+","+y+")",0,0);ctx.restore();}ctx.stroke();ctx.closePath();ctx.restore();}function drawAxisX(ctx){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';// 画轴
        ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(800, 0);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(800-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);ctx.lineTo(800, 0);ctx.lineTo(800-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);ctx.stroke();ctx.closePath();// 画刻度var x,y;y=5;for(x=50;x<800;x+=50){ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, y);ctx.stroke();ctx.closePath();}// 写文字var i=0;for(x=0;x<800;x+=50){ctx.save();ctx.scale(1,-1);ctx.fillText(i,x,y+10);ctx.restore();i++;}ctx.restore();}function drawAxisY(ctx){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';// 画轴
        ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(0, 200);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(Math.sin(getRad(15))*10, 200-Math.cos(getRad(15))*10);ctx.lineTo(0, 200);ctx.lineTo(-Math.sin(getRad(15))*10, 200-Math.cos(getRad(15))*10);ctx.stroke();ctx.closePath();// 画刻度var x,y;x=5;for(y=50;y<200;y+=50){ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(0, y);ctx.stroke();ctx.closePath();}// 写文字
        x=-19;for(y=50;y<200;y+=50){ctx.save();ctx.scale(1,-1);ctx.translate(0,-200);ctx.fillText(200-y,x,y);ctx.restore();}ctx.restore();}function getRad(degree){return degree/180*Math.PI;
    }
//-->
</script>

转载于:https://www.cnblogs.com/xiandedanteng/p/7594559.html

HTML5 Canvas 绘制库存变化折线增加超储告罄线相关推荐

HTML5 Canvas 绘制库存变化折线计算出库存周转率
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
html新增和删除行,html5页面结构的变化以及增加和删除标签的总结
这篇文章给大家介绍的内容是关于html5页面结构的变化以及增加和删除标签的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 页面结构传统页面结构 html5页面结构 eg 新增标 ...
在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是Canvas绘制的默认色彩,要想换一种颜色的 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...

HTML5 Canvas 绘制库存变化折线增加超储告罄线

HTML5 Canvas 绘制库存变化折线增加超储告罄线相关推荐

最新文章

热门文章

HTML5 Canvas 绘制库存变化折线 增加超储告罄线

HTML5 Canvas 绘制库存变化折线 增加超储告罄线相关推荐

最新文章

热门文章

HTML5 Canvas 绘制库存变化折线增加超储告罄线

HTML5 Canvas 绘制库存变化折线增加超储告罄线相关推荐