画布坐标
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>
|
