HTML 5 基础教程

HTML是超文本标记语言,是一种专门用来制作网页的语言,而HTML5就是它的第五个版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成,该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能,同时也给我们开发者带来了更多的开发选择,学习它是每个前端开发者必修的课程。

W3CAPI
1
2020-06-15 06:59:35
文档目录
我的书签
 

HTML5 Canvas 坐标系

在数学中,我们学习过坐标系,它用来描述物体在一个空间中的具体位置;对于HTML5中的画布来说,它是一个二维网格(后期可能会有三维空间),它使用了坐标的概念来描述物体在画布中的位置:
  • canvas 画布可以看做是一个二维网格,横向可以看做X轴,纵向可以看做是Y轴
  • canvas 二维画布的左上角坐标为 (0,0)
  • canvas 中所有需要绘制的对象 都是基于左上角坐标位置
  • ctx.fillRect(0,0,150,75) 方法实现的功能为:从左上角开始 (0,0),在画布上绘制 150x75 的矩形图形
如下实例,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动到矩形框上,显示定位坐标:  

把鼠标悬停在矩形上可以看到坐标

 
 
友情提示