H5 canvas 直线和三角形
2024-08-30 06:50:32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas> <script>
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
var cxt = canvas.getContext("2d");
cxt.moveTo(100,100);
cxt.lineTo(300,300);
cxt.lineTo(100,300);
cxt.lineTo(100,100); cxt.fillStyle = "rgb(2,100,30)";
cxt.fill(); cxt.lineWidth = 1;
cxt.strokeStyle = "red";
cxt.stroke();
cxt.closePath();
cxt.moveTo(100,400)
cxt.lineTo(400,400)
cxt.lineTo(300,400)
cxt.strokeStyle = "green";
cxt.stroke();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas> <script>
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
var cxt = canvas.getContext("2d");
cxt.moveTo(100,100);
cxt.lineTo(300,300);
cxt.lineTo(100,300);
cxt.lineTo(100,100); cxt.fillStyle = "rgb(2,100,30)";
cxt.fill(); cxt.lineWidth = 1;
cxt.strokeStyle = "red";
cxt.stroke();
cxt.closePath();
cxt.moveTo(100,400)
cxt.lineTo(400,400)
cxt.lineTo(300,400)
cxt.strokeStyle = "green";
cxt.stroke();
}
</script>
</body>
</html>
最新文章
- UIAlertController、UIAlertAction 警告框
- 从客户端(?)中检测到有潜在危险的 Request.Path 值 的解决方案
- css浮动
- WPF ComboBox Binding
- 话说 依赖注入(DI) or 控制反转(IoC)
- js中的prototype和constructor
- JobClient学习------作业提交与初始化
- java socket实现全双工通信
- Android-----使用Button特效 selector+shape
- WPF柱状图（支持数据库动态更新）
- Java POI 导出EXCEL经典实现 Java导出Excel
- !!!全球最流行开源硬件平台！不知道就OUT了！
- 基于visual Studio2013解决C语言竞赛题之0204实数求值
- VC++非MFC项目中如何使用TRACE宏
- JSON缺包导致的错误
- python的with语句，超级强大
- 《设计模式之禅》--设计模式大PK
- shell脚本备份日志文件
- C++指针和字符串
- tarjan求双联通分量（割点，割边）