html5 --- > canvas绘制网格并画x、y轴

最新推荐文章于 2024-05-08 13:42:39 发布

栗子好好吃

最新推荐文章于 2024-05-08 13:42:39 发布

阅读量1.7k

点赞数 1

分类专栏： html5 文章标签：方便引用

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如下:
在这里插入图片描述

// 代码如下:
<body>

	<canvas width="500" height="375" id="c"></canvas>

	<script>
		(function draw_a() {
			var a_canvas = document.getElementById("c");
			var context = a_canvas.getContext("2d");
			for( var x= 0.5; x < 500; x += 10){
				context.moveTo(x, 0);
				context.lineTo(x, 375);
			}
			for( var y= 0.5; y< 375; y += 10){
				context.moveTo(0, y);
				context.lineTo(500, y);
			}
			context.strokeStyle ="#eee";
			context.stroke();
			context.beginPath();
			context.moveTo(0,40);
			context.lineTo(240, 40);
			context.moveTo(260, 40);
			context.lineTo(500, 40);
			context.moveTo(495, 35);
			context.lineTo(500, 40);
			context.lineTo(495, 45);
			context.moveTo(60, 0);
			context.lineTo(60, 153);
			context.moveTo(60, 173);
			context.lineTo(60, 375);
			context.moveTo(65, 370);
			context.lineTo(60, 375);
			context.lineTo(55, 370);
			context.strokeStyle="#000";
			context.stroke();
			context.font = "bold 1.2em sans-serif";
			context.fillText("x", 244, 46);
			context.fillText("y", 55, 165);
			context.font = "bold 0.5em sans-serif";
			context.fillText("(0, 0)", 35, 35);
			context.fillText("(500, 375)",460, 370);
			context.fillRect(0, 0, 3, 3);
			context.fillRect(497, 372, 3, 3);
		})();
	</script>
</body>

参考《HTML5揭秘》 P63~P65

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

栗子好好吃

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 --- > canvas绘制网格并画x、y轴

效果如下:// 代码如下:<body> <canvas width="500" height="375" id="c"></canvas> <script> (function draw_a() { var a_canvas = document.getElementById("c"); var context = a_...
复制链接

扫一扫