仿照《HTML5揭秘》的一个案例，用canvas绘制了一个坐标系。
内容包括：
一组垂直的银色直线；
一组水平的银色直线；
两段水平的黑色直线；
两段黑色直线形成一个箭头；
两段垂直的黑色直线；
两段黑色直线形成了另外一个箭头；
字母“x”和“y”；
左上角和右下角的坐标“（0,0）”和“（500,300）”；
左上角和右下角的矩形；
中间的“Markpoor's blog：”和“www.markpoor.com”；
源代码：
<!DOCTYPE html>
<html lang="zh">
<meta charset="utf=8">
<body>
<canvas id="firstcanvas" width="500" height="300" style="border:1px solid #c3c3c3">
您的浏览器不支持canvas标签，请改为最新版本的chrome，firefox或Opera浏览器
</canvas>
<script type="text/javascript">
var cvs=document.getElementById("firstcanvas");
var context=cvs.getContext("2d");
for(var x=0.5;x<500;x+=10){
context.moveTo(x,0);
context.lineTo(x,300);
}
for(var y=0.5;y<300;y+=10){
context.moveTo(0,y);
context.lineTo(500,y);
}
context.strokeStyle="silver";
context.stroke();
context.beginPath();
context.moveTo(40,0);
context.lineTo(40,140);
context.moveTo(40,160);
context.lineTo(40,300);
context.moveTo(30,290);
context.lineTo(40,300);
context.lineTo(50,290);
context.moveTo(0,30);
context.lineTo(240,30);
context.moveTo(260,30);
context.lineTo(500,30);
context.moveTo(490,20);
context.lineTo(500,30);
context.lineTo(490,40);
context.strokeStyle="black";
context.stroke();
context.fillRect(0,0,5,5);
context.fillRect(495,295,5,5);
context.font="bold 20px sans-serif";
context.textAlign="middle";
context.fillText("x",248,35);
context.fillText("y",35,150);
context.textBaseline="top";
context.fillText("(0,0)",8,5);
context.textAlign="right";
context.textBaseline="buttom";
context.fillText("(500,300)",480,280);
context.font="宋体 20px";
context.fillStyle= "lightblue";
context.fillText("Markpoor' blog:",400,140);
context.fillText("www.markpoor.com",400,170)
</script>
</body>
</html>
演示地址：www.markpoor.com/html5/draw-coordinate-system-with-canvas/
分享到：
相关推荐
可以使用`translate`和`rotate`方法来改变坐标系，模拟行星围绕中心旋转的效果。通过定时器或`requestAnimationFrame`的递归调用来更新行星的位置，从而实现平滑的运动轨迹。 对于银河系的主体部分，可以使用复杂的...
- **2.13.1 坐标系的平移、缩放与旋转**：介绍如何使用`translate()`、`scale()`和`rotate()`方法来变换坐标系。 - **2.13.2 自定义的坐标变换**：演示如何使用矩阵来实现复杂的坐标变换。 - **2.14 图像合成**：...
首先创建Path对象，然后用`path.moveTo()`指定第一个顶点，用`path.lineTo()`添加其他顶点，最后用`canvas.drawPath(path, paint)`绘制。 示例代码： ```java Path polygon = new Path(); polygon.moveTo(x1, ...
《Canvas袖珍参考手册》（第1版）是一本全面介绍HTML5 Canvas元素及其功能的书籍。本书由David Flanagan编写，由O'Reilly Media出版。它既提供了一个教程，涵盖了所有Canvas元素的特点并配有许多实例，同时也是一个...
例如，使用`requestAnimationFrame`来平滑动画，避免一次性绘制所有图形导致页面卡顿。另外，可以使用虚拟DOM技术来减少重绘和重排，提高图表的渲染效率。 总结，通过HTML5的SVG和JavaScript，我们可以构建出高度...
6. **绘制缓存**：对于复杂的图表，可以考虑使用硬件加速或离屏缓存，将一次性绘制的结果保存下来，减少后续的绘制开销。 综上所述，利用Android的Canvas和触控事件处理，我们可以实现股票数据的滑动和缩放功能，...
使用`requestAnimationFrame()`方法来实现平滑的动画效果，因为它会在浏览器准备好绘制下一次帧时自动调用。 6. **控制鸟的飞行行为**： 添加逻辑来控制鸟的飞行路径，例如向上飞、向下飞、左右转弯。可以使用加...
开发者通常会使用requestAnimationFrame()方法，它可以在下一次重绘之前调用指定的函数，确保了平滑的动画效果。通过不断更新Canvas上的绘制内容，地球仪就可以呈现出连续旋转的效果。 至于经纬度定位功能，这是...
Path允许你添加直线、曲线等各种路径元素，然后在Canvas上一次性绘制出来，这在绘制连续的曲线时非常有用。 6. **刷新与动画**： 如果曲线图需要动态更新，可以使用postInvalidate()方法来触发重绘。若要实现平滑...
使用`requestAnimationFrame`来安排动画更新，确保在浏览器下一次绘制之前执行，可以提高性能并保持流畅的用户体验。 7. **响应式设计**: 考虑到不同设备的屏幕尺寸和触控方式，项目可能需要实现响应式布局，确保在...
参数(startX, startY)代表第一次触碰屏幕的点；(prevX, prevY)和(currentX, currentY)分别代表触碰点之前的坐标和当前坐标；draggedSprite表示指定的动画元素是否正在被拖动。 - **Touched(number x, number y, ...
【极坐标图】在数学中，极坐标系统是一种坐标系，其中点的位置由距离（半径）和方向（角度）来确定，而不是像直角坐标系中的x和y轴。在"polar-fractions"项目中，极坐标图被用来以独特的方式呈现有理数。每个分数被...
这样可以在内存中先绘制好图像，然后再一次性显示到屏幕上，避免频繁的屏幕刷新导致的闪烁现象。 8. **布局管理**：Java的布局管理器如`FlowLayout`、`BorderLayout`和`GridBagLayout`等，可以帮助我们在窗口中正确...