W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML Canvas 坐标



Canvas 坐标

HTML画布是一个二维网格。

画布的左上角有坐标,值为(0,0)

在上一章中,您看到了这种方法:fillRect(0,0,150,75)。

这意味着:从左上角(0,0)开始,并绘制一个 150x75 像素的矩形。


坐标实例

将鼠标放在下面的矩形上以查看其x和y坐标:

X
Y

画一条线

要在画布上画一条直线,请使用以下方法:

  • moveTo(x,y) - 定义线的起始点
  • lineTo(x,y) - 定义线的终点

要实际绘制线条,您必须使用其中一种 "ink" 方法,如 stroke()。

Example

Your browser does not support the HTML5 canvas tag.

在位置(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,start,stop)

Example

Your browser does not support the HTML5 canvas tag.

用 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();
尝试一下 »