1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>09-Canvas绘制坐标系</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="500" height="400"></canvas>

20 <script>

21     // 1.拿到canvas

22     let oCanvas = document.querySelector("canvas");

23     // 2.从canvas中拿到绘图工具

24     let oCtx = oCanvas.getContext("2d");

25     // 3.定义变量保存小方格的尺寸

26     let gridSize = 50;

27     // 4.拿到canvas的宽高

28     let canvasWidth = oCtx.canvas.width;

29     let canvasHeight = oCtx.canvas.height;

30     // 5.计算在垂直方向和水平方向可以绘制多少条横线

31     let row = Math.floor(canvasHeight / gridSize);

32     let col = Math.floor(canvasWidth / gridSize);

33     // 6.绘制垂直方向的横线

34     for(let i = 0; i < row; i++){

35         oCtx.beginPath();

36         oCtx.moveTo(0, i * gridSize - 0.5);

37         oCtx.lineTo(canvasWidth, i * gridSize - 0.5);

38         oCtx.strokeStyle = "#ccc";

39         oCtx.stroke();

40     }

41     // 7.绘制水平方向的横线

42     for(let i = 0; i < col; i++){

43         oCtx.beginPath();

44         oCtx.moveTo(i * gridSize - 0.5, 0);

45         oCtx.lineTo(i * gridSize - 0.5, canvasHeight);

46         oCtx.strokeStyle = "#ccc";

47         oCtx.stroke();

48     }

49

50     // 1.计算坐标系原点的位置

51     let originX = gridSize;

52     let originY = canvasHeight - gridSize;

53     // 2.计算X轴终点的位置

54     let endX = canvasWidth - gridSize;

55     // 3.绘制X轴

56     oCtx.beginPath();

57     oCtx.moveTo(originX, originY);

58     oCtx.lineTo(endX, originY);

59     oCtx.strokeStyle = "#000";

60     oCtx.stroke();

61     // 4.绘制X轴的箭头

62     oCtx.lineTo(endX - 10, originY + 5);

63     oCtx.lineTo(endX - 10, originY - 5);

64     oCtx.lineTo(endX, originY);

65     oCtx.fill();

66

67     // 5.计算Y轴终点的位置

68     let endY = gridSize;

69     // 3.绘制Y轴

70     oCtx.beginPath();

71     oCtx.moveTo(originX, originY);

72     oCtx.lineTo(originX, endY);

73     oCtx.strokeStyle = "#000";

74     oCtx.stroke();

75     // 4.绘制X轴的箭头

76     oCtx.lineTo(originX - 5, endY + 10);

77     oCtx.lineTo(originX + 5, endY + 10);

78     oCtx.lineTo(originX, endY);

79     oCtx.fill();

80 </script>

81 </body>

82 </html>

09-canvas绘制坐标系的更多相关文章

  1. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  2. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  3. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  4. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  5. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  8. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  9. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  10. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. Linux内核中的static-key机制

    # Linux内核中的static-key机制 背景 在移植某个TP时,发现频繁操作屏幕会导致i2c总线死掉.在跟踪代码的时候,我发现了这个static-key. 因此,学习一下这块的知识. refe ...

  2. Markdown 文章 跳转

    背景 在查阅一些文档的时候,一些比较优秀博客在文章中是带有目录的,点击就会跳转到指定的锚点. 在本人的某些文章中,也想尝试这样的效果. 做法 实现这样的效果有2种做法(不同之处在于 超链接的写法不同) ...

  3. ubuntu18 编译安装gccxml

    最近需要在ubuntu上安装gccxml,我的ubuntu版本是18. 使用sudo apt-get install gccxml提示找不到gccxml,最后使用了编译安装的方式安装gccxml. 1 ...

  4. Linux服务器从头配置

    安装配置jdk 下载 jdk jdk-8u171-linux-x64.tar.gz 将该压缩包放到/usr/local/jdk目录下然后解压(jdk目录需要自己手动创建) tar zxvf jdk-8 ...

  5. Unity的Package库在IDE里不显示API注释的解决方法

    当你在代码里使用Package库的API的时候,比如Addressable和Unity.Entities等等,以Visual Studio为例,鼠标放到API上,会发现不显示注释: 然而按F12访问源 ...

  6. oeasy教您玩转vim - 13 - # 大词小词

    大词小词 回忆上节课内容 我们上次学习了 e e 代表 end 词尾 自有跳跃 还可以成倍次数的跳跃 但其实我是想以一个一个属性地跳跃,有没有方法呢? 查询帮助 没思路的话我们还是得继续查询 :h w ...

  7. oeasy教您玩转vim - 7 - # 从头插入

    另存与保存 回忆上节课内容 上次我们学会了另存为命令 : saveas {file} 还有这个直接保存命令 : w 真的可以把修改存了 下面我们来研究插入命令的细节. 插入命令 首先我们可以查询这个插 ...

  8. Python爬虫（1-4）-基本概念、六个读取方法、下载（源代码、图片、视频 ）、user-agent反爬

    Python爬虫 一.爬虫相关概念介绍 1.什么是互联网爬虫 如果我们把互联网比作一张大的蜘蛛网,那一台计算机上的数据便是蜘蛛网上的一个猎物,而爬虫程序就是一只小蜘蛛,沿着蜘蛛网抓取自己想要的数据 解 ...

  9. python virtualenv虚拟环境配置与使用

    python virtualenv虚拟环境配置与使用 By:赖富玉 QQ:1033553122 概述 python开发过程中,我们可能需要同时开发多款应用,这些应用可能公用同一个版本的Python程序 ...

  10. nginx灰度发布、网站限速和防盗链

    一.灰度发布(金丝雀发布) 灰度发布时使用比较平稳的过渡方式升级或者替换产品项目的方法统称 主要作用 及时发现项目问题 尽早获取用户反馈的信息,以改进产品 如果项目产生问题,可以将问题影响控制到最小范 ...