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_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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251470.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！