canvas——绘制坐标系

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Canvas绘制坐标系</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas,请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			//原点坐标(100,400)
			var x0=100,y0=400;
			var arrowWith = 10;
			//绘制x轴
			ctx.beginPath();
			ctx.moveTo(x0, y0);
			ctx.lineTo( 400,400);
			ctx.lineTo( 400 - arrowWith, 400 - arrowWith);
			ctx.moveTo(400,400);
			ctx.lineTo( 400 - arrowWith, 400 + arrowWith);
			ctx.strokeStyle = 'purple';
			ctx.stroke();

			//绘制y轴
			ctx.beginPath();
			ctx.moveTo(x0, y0);
			ctx.lineTo(100,100);
			ctx.lineTo(100 - arrowWith, 100 + arrowWith);
			ctx.moveTo(100,100);
			ctx.lineTo(100 + arrowWith, 100 + arrowWith);
			ctx.strokeStyle = 'green';
			ctx.stroke();

			//绘制 点的坐标
			var data = [.1,.6,.8,.7, .4, .6];
            var maxHeight = 300;
            var maxWidth = 300;
			//每个点之间的距离
			var widthSpace = maxWidth / (data.length+1);
			ctx.beginPath();
			for( var i = 1; i <= data.length; i++ ) {
			    var x= x0 + i * widthSpace;
			    var y= y0 - data[i-1] * maxHeight;
				ctx.lineTo(x,y);
			}
			ctx.strokeStyle = 'blue';
			ctx.stroke();
		})();
	</script>
</body>
</html>

效果:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值