结果：

代码：

<!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. mysqlbinlog作用

    mysqlbinlog:解析mysql的binlog日志 在 mysql-bin.index里面记录了所有的binlog文件,它是一个索引 binlog日志的作用:用来记录mysql内部增删改查等对m ...

  2. HDU - 3488 Tour （KM最优匹配）

    题意:对一个带权有向图,将所有点纳入一个或多个环中,且每个点只出现一次,求其所有环的路径之和最小值. 分析:每个点都只出现一次,那么换个思路想,每个点入度出度都为1.将一个点拆成两个点,一个作为入度点 ...

  3. Sublime : python环境

    1.安装python.注意区分32位和64位版本,勾选下图红框实现自动将python安装位置添加到环境变量 2.键盘win+r,输入cmd调出命令行,输入python回车,根据结果查看时候安装成功 3 ...

  4. IntelliJ Idea 常用功能及其快捷键总结(长期更新，纯手动)

    基础功能总结 快捷键总结 全局搜索 CTRL SHIF F 局部搜索 CTRL F 替换 CTRL R 复制一行 CTRL D 剪切一行 CTRL X 行定位 CTRL G 文件重命名 SHIFT F ...

  5. MYSQL提权的各种姿势

    一.利用mof提权 前段时间Kingcope大牛发布了mysql远程提权0day,剑心牛对MOF利用进行了分析,如下: Windows 管理规范 (WMI) 提供了以下三种方法编译到 WMI 存储库的 ...

  6. html checkbox多选框语法与结构

    <input name="Fruit" type="checkbox" value="" /> 用法用例 <foreach ...

  7. GroupAnagrams，变形词问题

    问题描述:给定一个字符串数组,返回变形词组,变形词是指字母一样但顺序不一样的词. Given an array of strings, group anagrams together. For exa ...

  8. NumPy数据类型

    NumPy - 数据类型 NumPy 支持比 Python 更多种类的数值类型. 下表显示了 NumPy 中定义的不同标量数据类型. 序号 数据类型及描述 1. bool_存储为一个字节的布尔值(真或 ...

  9. SDWebImage支持URL不变时更新图片内容

    SDWebImage在iOS项目中是一个很常用的开源库,而且众所周知的是,它是基于URL作为Key来实现图片缓存机制的.在90%左右的情况下, 图片与URL是一一对应的,即使服务器修改了图片也会相应的 ...

  10. MySQL无法启动几种常见问题小结

    问题1:目录.文件权限设置不正确 MySQL的$datadir目录,及其下属目录.文件权限属性设置不正确,导致MySQL无法正常读写文件,无法启动. 错误信息例如: 复制代码 代码如下:[code] ...