AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > html游戏

HTML画布坐标-画直线-画圆

51自学网 http://www.wanshiok.com

 画布坐标

HTML画布是一个二维网格。

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

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

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

坐标示例
将鼠标悬停在下方的矩形上以查看其x和y坐标:

 

X
Y
 

画一条线

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


moveTo(x,y) - 定义行的起始点

lineTo(x,y) - 定义线的终点

要实际绘制线条,您必须使用“墨水”方法之一,如stroke()。

Example

在位置(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();

 

完整源代码:

<!DOCTYPE html>

<html>

<body>


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>


<script>


var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();


</script>


</body>

</html>

 

 


画一个圆

要在画布上画一个圆,请使用以下方法:

  • beginPath();
  • arc(x,y,r,start,stop)

Example

用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();
完整源代码:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

 
上一篇:HTML画布教程-画  下一篇:HTML画布渐变