Canvas绘制坐标系
运用Canvas绘制一个基本的坐标系，练习一下路径绘制。
实现效果如下：
代码实现如下：
<!DOCTYPE HTML>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvans绘制坐标系</title>
<style>
body {
text-align: center;
}
canvas {
background: #ddd;
}
</style>
</head>
<body>
<h1>Canvans绘制坐标系</h1>
<canvas id="c3" width="500" height="400">
您的浏览器不支持Canvas标签！
</canvas>
<script>
var ctx = c3.getContext('2d');
//绘制X轴
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(450, 350);
ctx.lineTo(450 - 30, 350 - 30);
ctx.moveTo(450, 350);
ctx.lineTo(450 - 30, 350 + 30);
ctx.lineWidth = 10;
//ctx.lineJoin = 'miter'; //线的连接处出现尖角
ctx.lineJoin = 'round'; //线的连接处出现圆角
//ctx.lineJoin = 'bevel'; //线的连接处出现方角
ctx.strokeStyle = '#f00';
ctx.stroke();
//绘制Y轴
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(50, 50);
ctx.lineTo(50 - 30, 50 + 30);
ctx.moveTo(50, 50);
ctx.lineTo(50 + 30, 50 + 30);
ctx.strokeStyle = '#3f3';
ctx.stroke();
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-06-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
