`

html5 canvas直线画简单的坐标系

 
阅读更多

看了html5的canvas觉得很好玩，故尝试了下，今天画了一个简单的坐标系，其实就是用横竖的线而已，注意坐标原点是从左上角开始，好了上代码。

  canvas框架部分

 

<html>
    <head>
  
    </head>
    <body>
        <canvas id="myCanvas" width="1200" height="1200">
        </canvas>
    </body>
</html

 具体的canvas代码

 

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    //横线与竖线的间隔距离
    var dx = 30;
    var dy = 30;
    //初始坐标点
    var x=0;
    var y=0;
    var w=canvas.width;
    var h=canvas.height;
    //单个步长所表示的长度
    var xy=10;
   //画横线
   while(y<h){
    y=y+dy;
    context.moveTo(x, y);
    context.lineTo(w,y);
    context.stroke();   
    //横坐标的数字
    context.font = "1pt Calibri";
    context.fillText(xy, x, y);
    xy+=10;
   }
   //画竖线
   y=0;
   xy=10;
   while(x<w){
     x=x+dx;
     context.moveTo(x, y);
     context.lineTo(x,h);
     context.stroke(); 
     //纵坐标的数字
     context.font = "1pt Calibri";
     context.fillText(xy,x,10);  
     xy+=10;
   }      
 
 };
 具体的效果自己可以尝试，做这个的目的还有一个是为了清楚的标示出每个元素在canvas上的坐标，记得算坐标要除以这里的逻辑坐标步长
分享到：
| log layouts
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    - **变换**：`translate()`, `rotate()`, `scale()`和`transform()`用于改变坐标系，实现平移、旋转、缩放等效果。 4. **动画原理** - **帧动画**：通过在每一帧改变图形的位置、大小或颜色实现动画效果。 - **...

    canvas 绘制旋转直线

    在旋转后，绘制的直线会相对于旋转后的坐标系进行。 4) **设置旋转中心** 默认情况下，旋转发生在画布的左上角。如果想让旋转以某个特定点为中心，我们需要先使用`context.translate(x, y)`移动当前绘图的原点到...

    HTML5 CANVAS

    在Canvas中，图形的旋转是基于当前坐标系的原点（即画布的左上角）进行的。`rotate()`函数接受一个角度参数，该角度是逆时针方向的弧度值。旋转后的图形将根据新的坐标系进行绘制。 6. **图形变化**： 除了旋转，...

    html5 canvas中文文档

    #### 三、Canvas坐标系 - **translate方法（移动）** `translate(x, y)`方法用来改变原点的位置，将画布的坐标系沿x轴和y轴方向平移。 ```javascript ctx.translate(100, 50); ``` - **scale方法（缩放）** `...

    HTML5 Canvas绘制时钟

    - `translate()`: 改变绘图的原点（坐标系）。 - `rotate()`: 旋转当前坐标轴。 - `save()`和`restore()`: 保存和恢复绘图状态，用于管理变换堆栈。 3. 实现时钟的步骤 - 创建`&lt;canvas&gt;`元素：在HTML中定义一个...

    html5 canvas 助记手册

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态的、交互式的图形绘制。这个“HTML5 Canvas助记手册”显然是为了帮助开发者快速理解和记忆Canvas API的关键特性，结合图形与文字，使其学习...

    HTML5 canvas 3D烟花爆炸动画.zip

    2. **坐标系统**：canvas使用笛卡尔坐标系，原点位于左上角，x轴向右，y轴向下。开发者需要根据这个坐标系统来定位烟花的起始和结束位置。 3. **路径绘制**：烟花的轨迹可以看作是路径，通过`beginPath()`、`moveTo...

    HTML5 Canvas API 教程

    例如，`beginPath()` 开始一个新的路径，`moveTo(x, y)` 将路径移动到指定的位置，`lineTo(x, y)` 在两个点之间画一条直线。 - **形状**：除了路径之外，还可以直接绘制简单的形状，如矩形、圆形等。例如，`rect(x, ...

    《HTML5+Canvas核心技术图形动画与游戏开发》.((美)David+Geary).pdf

    ### HTML5+Canvas核心技术图形动画与游戏开发 #### 一、HTML5与Canvas技术简介 HTML5 是一种用于构建和呈现网页的标准标记语言的新版本，它不仅提供了对传统Web页面的支持，还引入了一系列新的功能和技术，使Web...

    HTML5 Canvas创意时钟特效.zip

    考虑到时钟指针的旋转，我们需要使用`rotate()`方法来改变坐标系，使得每次绘制都在上一次的基础上旋转一定的角度。 5. **更新时间**：时钟需要实时反映当前的时间，所以需要一个定时器（如`setInterval()`）每隔...

    Canvas带坐标雷达扫描特效.zip

    "Canvas带坐标雷达扫描特效.zip"这个资源提供了一个利用canvas 2D渲染上下文来创建雷达扫描动画的实例，适用于各种需要动态监测或指示的场景，如游戏、监控系统或者地图应用。 首先，我们需要理解Canvas的基本用法...

    HTML5 Canvas绘画银河特效特效代码

    在这个"HTML5 Canvas绘画银河特效特效代码"示例中，我们看到的是如何利用Canvas API来创建一个互动式的银河系效果，用户可以通过鼠标左键点击并移动来绘制银河，光标的移动速度会影响到绘制的笔触大小，从而增加交互...

    使用HTML5Canvas进行数据可视化.pdf

    在绘制图表时，我们需要考虑到坐标系的概念。在 Canvas 中，我们需要指定绘制对象的坐标，以便 Canvas 能够正确地绘制图形。例如，在绘制 x 轴时，我们需要指定其起点和终点的坐标，以便 Canvas 能够正确地绘制 x 轴...

    关于HTML5 canvas 所有API的分类列表图

    HTML5 Canvas是一个强大的图形绘制工具，它允许网页开发者在页面上动态绘制2D图形，而无需依赖外部插件。这个技术对于游戏开发、数据可视化、图表制作等应用场景非常有用。Canvas API提供了大量的方法和属性，使得...

    HTML5 Canvas彩色流体旋转加载动画特效

    4. **旋转（Rotation）**：利用`rotate()`方法改变当前坐标系的旋转角度，实现元素的旋转动画。 5. **定时器（Timer）**：使用`requestAnimationFrame()`函数定期更新画面，配合时间变量控制动画的进度，使流体动态...

    基于HTML5 canvas的简单抽奖轮盘特效代码.zip

    在本压缩包中，“基于HTML5 canvas的简单抽奖轮盘特效代码”是一个利用HTML5的canvas元素实现的互动抽奖轮盘效果。canvas是HTML5中的一个画布标签，允许开发者通过JavaScript进行像素级别的图像处理，创建丰富的动态...

    html5 canvas实现跳舞的机器人动画特效源码.zip

    6. **变换**：`translate()`、`rotate()`和`scale()`方法用于改变绘制坐标系，实现机器人的移动、旋转和缩放动画效果。 7. **事件监听**：可能还包含了对用户输入的监听，如键盘或鼠标事件，使得机器人可以响应用户...

    HTML5_Canvas_2D_API_规范_1.0_中文版.pdf

    绘图上下文是一个二维的绘图平面，可以看作是一个笛卡尔坐标系，其左上角坐标为(0,0)，x轴向右延伸，y轴向下延伸。开发者可以调用不同的方法来在这个上下文中绘制各种形状、图像或文本。 文档中提到了几个关键的...

    HTML5 Canvas实现网页版推箱子小游戏特效源码.zip

    - 画布坐标系统：Canvas的坐标系统是笛卡尔坐标系，(0,0)位于左上角。 2. 绘制基本图形： - 线条绘制：`beginPath()`, `moveTo()`, `lineTo()`, `stroke()`等方法用于绘制直线。 - 填充形状：`fillRect()`, `arc...

Magicbox
Global site tag (gtag.js) - Google Analytics