canvas画布主要就是要找坐标
前言
一、canvas是什么?
canvas是一个可自定义width、height的矩形画布,画布左上角为坐标原点,以像素为单位,水平向右为x轴,垂直向下为y轴,画布内所有元素的位置基于原点进行定位。
二、canvas操作
//1. 获取一个画布(要创建一个画布对象)
//2. 创建一个画布上下文对象
//3. 告诉程序绘画路径开始
//4. 绘制图形的起始点(坐标)
//5. 绘制图形的连接点
//6. 设置图形的样式
//7. 描边
1.画线
找到起始坐标即可,canvas画布操作大致相同,以画线为例
代码如下(示例):
<canvas id="canvas" width="500px" height="500px">您的游览器版本太低,不支持画布,请更新游览器</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas"); // 1.获取一个画布(要创建一个画布对象)
var context = canvas.getContext("2d"); //2.创建一个画布的下文对象
context.beginPath(); //3.告诉程序绘画路径开始
context.moveTo(0, 0); //4.绘制图形的起始点(坐标)
context.lineTo(1850, 1800);