HTML 画布坐标
画布坐标
HTML 画布是一个二维网格。
画布左上角坐标是 (0,0)
在上一章中，您看到了使用的方法: fillRect(0,0,150,75)
这意味着:从左上角 (0,0) 开始，绘制一个 150x75 像素的矩形。
坐标实例
将鼠标悬停在下面的矩形上，查看其 x 和 y 坐标:
X
Y
绘制一条直线
要在画布上绘制直线，请使用以下方法:
moveTo(x,y)- 定义直线的起点lineTo(x,y)- 定义直线的终点
要真正画这条线，必须使用 "ink" 方法之一，如 stroke()。
实例
在位置(0,0)中定义起点，在位置(200,100)中定义终点。然后使用 stroke（）方法实际绘制直线:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
亲自试一试 »
绘制一个圆
要在画布上绘制圆，请使用以下方法:
beginPath()- 开始一条路径arc(x,y,r,startangle,endangle)- 创建圆弧/曲线。使用arc()创建圆: 将开始角度设置为 0 ，将结束角度设置为 2*Math.PI。 x 和 y 参数定义圆心的 x 和 y 坐标。r 参数定义圆的半径。
实例
用 arc() 方法定义一个圆。然后使用 stroke() 方法实际绘制圆:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
亲自试一试 »
