2.8.2_网格的绘制
来源:互联网 发布:java批量上传文件 编辑:程序博客网 时间:2024/05/20 16:35
2.8.2_网格的绘制
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>网格的绘制</title> <style> body{ background: #000000; } #canvas{ background: #fff; } </style> </head> <body> <canvas id="canvas" width="1100" height="650"></canvas> </body> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); drawGrid(context,'lightgray',10,10); //绘制网格 绘图环境 ,网格线颜色 ,横向间隔,纵向间隔 function drawGrid(context,color,stepX,stepY){ context.strokeStyle = color; context.lineWidth = 0.5; for(var i=stepX+0.5; i<context.canvas.width;i+=stepX){ //绘制纵向线 context.beginPath(); context.moveTo(i,0); context.lineTo(i,context.canvas.height); context.stroke(); } for(var i=stepY+0.5; i<context.canvas.height;i+=stepY){ //绘制纵向线 context.beginPath(); context.moveTo(0,i); context.lineTo(context.canvas.width,i); context.stroke(); } } </script></html>
0 0
- 2.8.2_网格的绘制
- 2.8.3_坐标轴的绘制
- 2.8.5_虚线的绘制
- WPF中绘制网格
- 用R绘制网格
- c# 绘制网格
- canvas绘制网格
- Canvas绘制网格
- three.js绘制网格
- 2.3_矩形的绘制
- 2.11_多边形的绘制
- 4.3_水印的绘制
- 庆贺,绘制出World Wind的LOD地形网格
- 庆贺,绘制出World Wind的LOD地形网格 .
- 2.8.4_橡皮筋式的线条绘制
- 递进网格算法绘制等高线
- Canvas练习之绘制网格
- canvas绘制网格(增加坐标)
- [LeetCode]107. Binary Tree Level Order Traversal II
- 调优之内存调优-NUMA
- 【AndroidStudio】小米 DELETE_FAILED_INTERNAL_ERROR
- H5页面仿原生列表会话左滑显示删除键--整体滑动
- spark-streaming-[4]-Window Operations
- 2.8.2_网格的绘制
- 纵论“新零售”
- 2.2.补基础之shell和Makefile
- 数据结构中常见的树(BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B+树、B*树)
- 代理模式
- JDK各个版本的新特性
- JAVA自学
- Groovy简单指南
- 2.8.3_坐标轴的绘制