canvas的学习

最新推荐文章于 2022-10-01 07:42:52 发布

Richard678

最新推荐文章于 2022-10-01 07:42:52 发布

阅读量151

点赞数

分类专栏： java

java 专栏收录该内容

624 篇文章 5 订阅

订阅专栏

<script>
window.onload=function(){

var canvas = document.getElementById("canvas_1");
var context= canvas.getContext("2d");

context.fillStyle="#A9A9A9";
context.lineWidth=1;
context.strokeStyle="#d0d0d0";

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,50);
context.lineTo(1300,50);
context.stroke();
context.fillText("3500",60,55,50);

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,130);
context.lineTo(1300,130);
context.stroke();
context.fillText("3000",60,135,50);

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,210);
context.lineTo(1300,210);
context.stroke();
context.fillText("2500",60,215,50);

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,290);
context.lineTo(1300,290);
context.stroke();
context.fillText("2000",60,295,50);

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,370);
context.lineTo(1300,370);
context.stroke();
context.fillText("1500",60,375,50);

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,450);
context.lineTo(1300,450);
context.stroke();
context.fillText("1000",60,455,50);

context.beginPath();
context.setLineDash([3, 3]);
context.moveTo(90,530);
context.lineTo(1300,530);
context.stroke();
context.fillText("500",60,535,50);

context.beginPath();
context.setLineDash([]);
context.moveTo(90,610);
context.lineTo(1300,610);
context.stroke();
context.fillText("0",60,615,50);

context.beginPath();
context.setLineDash([]);
context.moveTo(90,610);
context.lineTo(90,618);
context.stroke();
context.fillText("2019-06-28",60,640,80);

context.beginPath();
context.setLineDash([]);
context.moveTo(291.66,610);
context.lineTo(291.66,618);
context.stroke();
context.fillText("2019-06-28",261.66,640,80);

context.beginPath();
context.setLineDash([]);
context.moveTo(493.33,610);
context.lineTo(493.33,618);
context.stroke();
context.fillText("2019-06-29",463.33,640,80);

context.beginPath();
context.setLineDash([]);
context.moveTo(694.99,610);
context.lineTo(694.99,618);
context.stroke();
context.fillText("2019-06-30",664.99,640,80);

context.beginPath();
context.setLineDash([]);
context.moveTo(896.66,610);
context.lineTo(896.66,618);
context.stroke();
context.fillText("2019-07-01",866.66,640,80);

context.beginPath();
context.setLineDash([]);
context.moveTo(1098.32,610);
context.lineTo(1098.32,618);
context.stroke();
context.fillText("2019-07-02",1068.32,640,80);

context.beginPath();
context.setLineDash([]);
context.moveTo(1300,610);
context.lineTo(1300,618);
context.stroke();
context.fillText("2019-07-03",1270,640,80);

context.beginPath();
context.moveTo(90, 530);
context.bezierCurveTo(212, 403, 857, 808, 1300, 184);
context.lineWidth=3;
context.strokeStyle="#178dfa";
context.stroke()

}
</script>