结果：

代码：

<!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. go——数组

    数组(array)就是由若干个相同类型的元素组成的序列. var ipv4 [4]uint8 = [4]uint8(192,168,0,1) 在这条赋值语句中,我们为刚声明的变量ipv4赋值.在这种情 ...

  2. Python之验证码

    Python生成随机验证码,需要使用PIL模块. 安装: ? 1 pip3 install pillow 基本使用 1. 创建图片 ? 1 2 3 4 5 6 7 8 9 from PIL impor ...

  3. zend studio设置utf8

    1. windows -> preference -> general -> workspace 2.项目右键 -> properities -> resource 3. ...

  4. cdoj1338郭大侠与英雄学院

    地址:http://acm.uestc.edu.cn/#/problem/show/1338 思路: 郭大侠与英雄学院 Time Limit: 6000/2000MS (Java/Others)    ...

  5. LeetCode 53. Maximum Subarray 最大连续字段和问题

    考察:最大连续字段和问题. 解决问题时间复杂度:O(n) 问题隐含条件:如果给出的数集都是负数,那么最大连续字段和就是,最大的那个负数. eg:{-2,-1}  结果应该输出 -1 而不是 0 int ...

  6. 菜单Menu

    <Menu HorizontalAlignment="> <MenuItem Header="文件"> <MenuItem Header=& ...

  7. 使用redis做mysql缓存

    应用Redis实现数据的读写,同时利用队列处理器定时将数据写入mysql. 同时要注意避免冲突,在redis启动时去mysql读取所有表键值存入redis中,往redis写数据时,对redis主键自增 ...

  8. git 强制放弃本地修改（新增、删除文件）【转】

    本文转载自:https://blog.csdn.net/u012672646/article/details/56676804 本地修改了一些文件,其中包含修改.新增.删除的,不需要了想要丢弃,于是做 ...

  9. Linux系统下Git操作命令整理

    1.显示当前的配置信息 git config --list 2. 创建repo从别的地方获取 git clone git://git.kernel.org/pub/scm/git/git.git 自己 ...

  10. Gentoo系统安装步骤详解

    下载镜像 一般我都是用国内的镜像源,不管是centos,ubuntu还是gentoo在国内的镜像来说肯定比国外快 #下载地址mirrors.163.com/gentoo/#我用的x86的http:// ...