结果：

代码：

<!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. mysql第二天作业

    create database 数据库名 default charset utf8;use 数据库名;1.创建成绩表,字段包括:学生姓名,语文成绩,数学成绩,英语成绩create table resu ...

  2. LeetCode：二进制手表【401】

    LeetCode:二进制手表[401] 题目描述 二进制手表顶部有 4 个 LED 代表小时(0-11),底部的 6 个 LED 代表分钟(0-59). 每个 LED 代表一个 0 或 1,最低位在右 ...

  3. asp.net MVC 强类型视图表单Ajax提交的注意事项

    xmfdsh这几天遇到这么一个问题,在MVC中通过model模型生成的强类型视图的表单,在提交后的回调函数并没有发挥作用.如下图: 如上图,无论是通过Ajax.BeginForm或者Html.Begi ...

  4. hadoop27---netty中handler的执行顺序

    Netty是基于Java NIO的网络应用框架. Netty是一个NIO client-server(客户端服务器)框架,使用Netty可以快速开发网络应用,例如服务器和客户端协议.Netty提供了一 ...

  5. 在Ubuntu上安装Brackets的步骤（加源和移除源）

    学习编写接口开发和测试时需要用到编写HTML页面,在Windows下采用的是HBuilder,但是无Ubuntu版本.安装一个网上推荐的Brackets 安装步骤:参见http://www.xiton ...

  6. linux比较两个文件的不同（6/21）

    cmp 命令:比较任意两个类型的文件,且吧结果输出到标准输出,默认文件相同不输出,不同的文件输出差异 必要参数 -c 显示不同的信息-l 列出所有的不同信息-s 错误信息不提示 选择参数 -i< ...

  7. 20145219 《Java程序设计》实验二 Java面向对象程序设计实验报告

    20145219 <Java程序设计>实验二 Java面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S. ...

  8. NOIP 数字游戏

    描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共n个),你要按顺序将其分为m ...

  9. lastIndexOf 方法 (Array) (JavaScript)

    lastIndexOf 方法 (Array) (JavaScript) 返回指定的值在数组中的最后一个匹配项的索引. 语法         array1.lastIndexOf(searchEleme ...

  10. Memcached replace 命令

    Memcached replace 命令用于替换已存在的 key(键) 的 value(数据值). 如果 key 不存在,则替换失败,并且您将获得响应 NOT_STORED. 语法: replace ...