canvas绘制X,Y轴输入坐标进行添加图形
时间: 2023-08-11 08:18:49 浏览: 55
好的,下面是利用Canvas绘制X,Y轴,并在指定坐标处添加图形的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas绘制图形</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//设置坐标系原点
ctx.translate(50,350);
//绘制x轴
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,0);
ctx.stroke();
//绘制y轴
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-300);
ctx.stroke();
//绘制x轴箭头
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(290,-10);
ctx.lineTo(290,10);
ctx.closePath();
ctx.fill();
//绘制y轴箭头
ctx.beginPath();
ctx.moveTo(0,-300);
ctx.lineTo(10,-290);
ctx.lineTo(-10,-290);
ctx.closePath();
ctx.fill();
//绘制x轴刻度
for(var i=0;i<=6;i++){
ctx.beginPath();
ctx.moveTo(i*50,0);
ctx.lineTo(i*50,-10);
ctx.stroke();
ctx.fillText(i*50,i*50,-20);
}
//绘制y轴刻度
for(var i=0;i<=6;i++){
ctx.beginPath();
ctx.moveTo(0,-i*50);
ctx.lineTo(10,-i*50);
ctx.stroke();
ctx.fillText(i*50,15,-i*50);
}
//绘制x轴标签
ctx.fillText("X",310,-10);
//绘制y轴标签
ctx.fillText("Y",10,-310);
//添加图形
ctx.beginPath();
ctx.arc(150,-150,50,0,2*Math.PI); //绘制圆形,圆心坐标为(150,-150),半径为50
ctx.fillStyle = 'red'; //填充颜色为红色
ctx.fill(); //填充图形
ctx.beginPath();
ctx.rect(200,-200,80,120); //绘制矩形,左上角坐标为(200,-200),宽为80,高为120
ctx.strokeStyle = 'blue'; //边框颜色为蓝色
ctx.lineWidth = 2; //边框宽度为2
ctx.stroke(); //绘制边框
</script>
</body>
</html>
```
这段代码会绘制一个400x400的Canvas,并在坐标(150,-150)处绘制一个红色的圆形,以及在坐标(200,-200)处绘制一个蓝色的矩形。你可以将代码复制到HTML文件中运行,查看效果。