canvas 绘制坐标轴
2024-08-27 16:20:32
结果:
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
canvas {
background: #ddd;
}
</style>
</head>
<body>
<h3>绘制路径——直线</h3>
<canvas id="c13" width="500" height="400"></canvas>
<script>
var ctx = c13.getContext('2d'); //绘制X轴
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(450, 350);
ctx.lineTo(450-20, 350-20);
ctx.moveTo(450, 350);
ctx.lineTo(450-20, 350+20); //ctx.lineJoin = 'miter'; //线的连接处采用尖角
//ctx.lineJoin = 'bevel'; //线的连接处采用方角
ctx.lineJoin = 'round'; //线的连接处采用圆角
ctx.lineWidth = 5;
ctx.strokeStyle = '#0a0';
ctx.stroke(); //绘制Y轴
ctx.beginPath(); //必须开始新路径
ctx.moveTo(50, 350);
ctx.lineTo(50, 50);
ctx.lineTo(50-20, 50+20);
ctx.moveTo(50, 50);
ctx.lineTo(50+20, 50+20); ctx.strokeStyle = '#00f';
ctx.stroke(); </script>
</body>
</html>
最新文章
- 《Entity Framework 6 Recipes》中文翻译系列 (31) ------ 第六章 继承与建模高级应用之自引用关联
- 解剖SQLSERVER 第二篇 对数据页面头进行逆向(译)
- ASP.Net MVC如何访问的静态页面
- Java基础之集合框架——使用堆栈Stack<;>;对象模拟发牌(TryDeal)
- bzoj 1189 二分+最大流判定
- vijosP1543 极值问题
- 【Eclipse】Failed to load the JNI shared library
- js获取地址栏url以及获取url参数
- Java核心-多线程-并发控制器-Exchanger交换器
- mkdir npm
- ssh test
- 关于Unity中NGUI的帧动画和Tween动画
- nginx权限问题failed(13:Permission denied)
- Mac下启动AndroidStudio失败
- NPOI2.2.0.0实例详解(十一)—向EXCEL插入图片
- tensorflow笔记之学习率设置
- 使用 FRP 反向代理实现 Windows 远程连接
- [Nlog]使用经验
- Delphi编写下载程序:UrlDownloadToFile的进度提示
- Spark高速入门指南(Quick Start Spark)
热门文章
- webservice -- cxf客户端调用axis2服务端
- vscode 编写c++
- PolyBase--整合SQLServer和Hadoop
- Kotlin学习记录3
- sql 语句 名称解析,是 由内向外的。
- SQL中的几个判断是否存在
- NOIP 马拦过河卒
- 简单介绍java Enumeration(转)
- SSL证书是“盾牌“还是”鸡肋“?
- JavaWeb -- Struts1 多文件上传与下载 DownloadAction, DispatchAction