<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas 绘图</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="canvas-container" style="width: 1080px; height: 1920px;">
<canvas id="canvas" width="1080" height="1920">不支持canvas</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var cvsClientRect = canvas.getBoundingClientRect();
var points = [];
canvas.addEventListener("mousedown", mousedownHandler, false);
var flag = false;
function mousedownHandler(event) {
debugger;
if (event.button == 0 && !flag) {
points.push({
x: event.pageX - cvsClientRect.x,
y: event.pageY - cvsClientRect.y
});
if (points.length >= 1) {
canvas.addEventListener("mousemove", mousemoveHandler, false);
}
drawPolygon(points);
} else if (event.button === 2) {
flag = true;
cvs.removeEventListener("mousemove", mousemoveHandler);
}
}
function drawPolygon(points) {
ctx.clearRect(0, 0, 1080, 1920);
ctx.strokeStyle = '#000';
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.closePath();
ctx.stroke();
}
function mousemoveHandler(event) {
drawPolygon(points.concat({
x: event.pageX - cvsClientRect.x,
y: event.pageY - cvsClientRect.y
}));
}
</script>
</body>
</html>
canvas.zip （4个子文件） 
canvas 
index.html 1KB index.1.html 2KB
canvas.js 54KB newCanvas.js 22KB资源评论
- qaz159wwe2021-02-26打开一大堆错误呀勤劳@小蚂蚁2021-03-05您好，您是不是运行的方式有问题，您直接用浏览器访问index.html，默认是画矩形的，您访问index.html后，安装鼠标并拖动即可绘制矩形
勤劳@小蚂蚁
- 粉丝: 16
- 资源: 3
会员权益专享
最新资源
- 第4次作业_计算税后工资.cpp
- 校园管理 - 学生管理系统源码
- 1047538782469312MOJiRead_channel_google_code_1.5.5_60_20230314182834_NO-HW_release.apk
- stm32的nucleo开发板点亮LED的汇编程序
- WPSOffice-v17.3.2(1394)-v8a,v7a-Balatan.apk
- python练习题代码参考-职工管理系统
- python读取某文件夹下的所有文件名将读出的文件名输出到CSV文件
- Sparse_Identification_Part2.mlx
- python斐波那契数列
- python非递归方式计算阶乘（循环）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
