结果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>绘制路径——直线</h3>

  <canvas id="c13" width="500" height="400"></canvas>

  <script>

    var ctx = c13.getContext('2d');

    //绘制X轴

    ctx.beginPath();

    ctx.moveTo(50, 350);

    ctx.lineTo(450, 350);

    ctx.lineTo(450-20, 350-20);

    ctx.moveTo(450, 350);

    ctx.lineTo(450-20, 350+20);

    //ctx.lineJoin = 'miter'; //线的连接处采用尖角

    //ctx.lineJoin = 'bevel'; //线的连接处采用方角

    ctx.lineJoin = 'round'; //线的连接处采用圆角

    ctx.lineWidth = 5;

    ctx.strokeStyle = '#0a0';

    ctx.stroke();

    //绘制Y轴

    ctx.beginPath();  //必须开始新路径

    ctx.moveTo(50, 350);

    ctx.lineTo(50, 50);

    ctx.lineTo(50-20, 50+20);

    ctx.moveTo(50, 50);

    ctx.lineTo(50+20, 50+20);

    ctx.strokeStyle = '#00f';

    ctx.stroke();

  </script>

</body>

</html>

canvas 绘制坐标轴的更多相关文章

  1. canvas绘制坐标轴

    效果图如下, var canvas = document.getElementById("canvas"), context = canvas.getContext("2 ...

  2. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  4. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  5. canvas绘制五角星详细过程

    canvas绘制 <canvas id="straight"></canvas> <script> var canvas = document. ...

  6. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  7. 浅谈使用canvas绘制多边形

    本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...

  8. canvas绘制折线图

    效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. SQL联接 外联接 内联接 完全联接 交叉联接

    联接分为: 内联接                        [inner join] 外联接        (左外联接,右外联接)        [left join/left outer jo ...

  2. 查询前几条记录 top limit

    SQL Server 数据库中的Top关键字可实现查询数据库表中的前几条数据,但是需要注意的是,Top关键字只能在SQL Server数据库中可以使用,而在MySQL数据库中就要使用具有同样功能的LI ...

  3. poj3903 Stock Exchange 二分+dp

    题目地址:http://poj.org/problem?id=3903 题目: Description The world financial crisis is quite a subject. S ...

  4. Web开发相关笔记

    1.MySQL命令行下执行.sql脚本详解http://database.51cto.com/art/201107/277687.htm 在可视化工具里导出.sql脚本 --> 放命令行里运行 ...

  5. HTML5抽奖转盘

    在线演示 本地下载

  6. qss 样式不生效--注释不能嵌套

    qss 兼容 css 调qt样式的时候出现一个很奇怪的问题 删掉注释掉的内容 样式正常,不删注释 ,注释后面的样式全部失效.有点困惑的是: 感觉很困惑,后来发现里面有行中文注释,删掉中文注释就行了,以 ...

  7. JAVA基础补漏--ArrayList

    今天在写代码的时候,index定义的时候用了Integer,在list.remove(index)的时候,总是不成功,后来发现如果用Integer定义的时候,index不再是基础数据类型,被识别为re ...

  8. fabric安装使用

    可以使用pip安装fabric,注意使用pip 安装fabric时,一定要指定版本,不要安装2.0版本的,无论怎样都会提示没有api这样模块,所以指定安装 pip install fabric==1. ...

  9. Hibernate常见优化策略

    ① 制定合理的缓存策略(二级缓存.查询缓存). ② 采用合理的Session管理机制. ③ 尽量使用延迟加载特性. ④ 设定合理的批处理参数. ⑤ 如果可以,选用UUID作为主键生成器. ⑥ 如果可以 ...

  10. Java IO操作——数据操作流DataOutputStream和DataInputStream的使用

    学习目标  掌握DataOutputStream和DataInputStream的作用 可以使用DataOutputStream和DataInputStream写入和读入数据 数据操作流 在io包中, ...