结果：

代码：

<!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. Python基础、判断、循环、列表、字典，day1

    一.Python 简介 1.介绍 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标 ...

  2. python 2 和python 3的 区别

    用户交互 input  ps:python2:raw_input python3:input 在 python2里 print不需要加括号也可以打印 子python3里 print 必须加括号才能打印

  3. jquery jsonp请求错误处理

    jQuery将ajax方法进行了封装,jsonp可以轻松实现跨域请求. $.ajax({type: 'GET', url: "<%= SysUtils::TASK_CENTER_URL ...

  4. s5_day11作业

    # 1 文件内容如下,标题为:姓名,性别,年纪,薪资 # # egon male 18 3000 # alex male 38 30000 # wupeiqi female 28 20000 # yu ...

  5. Python:笔记(5)——错误、调试和测试

    Python:笔记(5)——错误.调试和测试 错误处理 1.TRY语句 这个和Java中的语法是及其相似的,catach换成except. 说明:同样,不管有没有错误,fianlly都会执行的! 补充 ...

  6. 杭电1024Max Sum Plus Plus

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=1024 题目: Problem Description Now I think you have got a ...

  7. windo form 窗体布局方式

    DataGridView:显示数据表后台数据绑定:List<xxx> list = new List<xxx>();dataGridView1.DataSource = lis ...

  8. Spring中的定时调度(Scheduling)和线程池(Thread Pooling)

    使用triggers和SchedulerFactoryBean来包装任务 我们已经创建了job details,jobs.我们同时回顾了允许你调用特定对象上某一个方法的便捷的bean. 当然我们仍需要 ...

  9. Entity FrameWork 配置 之连接字符串隐藏或重用

    C/S项目中使用EF,默认回生成app.config文件夹,软件打包安装成功之后就回生成一个对应exe.config.里面会包含配置的一些信息. 这里介绍给大家一种隐藏连接字符串的方式. 代码如下: ...

  10. 阿里云服务器： centos7 ftp安装

    阿里云服务器: centos7 ftp安装 ftp需要您参考下面链接和附件开放安全组20.21.1024-65535 后查看是否正常. 配置步骤如下, 1, 如果没有安装ftp,需要先安装 yum - ...