结果：

代码：

<!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. Java集合（9）：ConcurrentHashMap

    一.ConcurrentHashMap介绍 我们可以在单线程时使用HashMap提高效率,而多线程时用Hashtable来保证安全.但是,HashMap中未进行同步考虑,而Hashtable则使用了s ...

  2. Servlet Rest

    http://www.blogjava.net/yongboy/archive/2010/10/01/333609.html

  3. linux java环境配置

    一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i586.bin 这个是自解压的文件,在lin ...

  4. 参考MongoRepository，为接口生成bean实现注入

    首先弄个注解,给代码个入口,这个就是mongo的@EnableMongoRepositories了. @Target(ElementType.TYPE) @Retention(RetentionPol ...

  5. Oracle函数如何把符串装换为小写的格式

    我们都知道Oracle函数在实际的应用中比较广泛,对其的实际操作与其相关功能也是颇为熟悉,但是你了解Oracle函数怎样使将字符串装换为小写的格式的具体操作吗?如果你有兴趣的话你就可以浏览以下的文章. ...

  6. CentOS6、7优化脚本完美版

    #!/bin/bash SysVer=`cat /etc/redhat-release | awk -F'release' '{print $2}' | awk -F'[ .]+' '{print $ ...

  7. Spring_通过注解配置 Bean(1)

    beans-annotation.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns ...

  8. iOS日常学习 - iOS10上关于NSPhotoLibraryUsageDescription等问题

    最近升级了Xcode8.0,真是很多坑啊,填完一个来另外一个,今天又遇到了一个,用Xcode8.0上传项目时被驳回说是info.plist里面没有设置NSPhotoLibraryUsageDescri ...

  9. HTTP Message Handlers in ASP.NET Web API

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/http-message-handlers A message ha ...

  10. python 中 正则表达式 的应用

    python 中 正则表达式 的应用 最近作业中出现了正则表达式,顺便学习了一下. python比较厉害的一点就是自带对正则表达式的支持,用起来很方便 正则表达式 首先介绍一下什么是正则表达式. 正则 ...