html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} #myCanvas {
background: #abcdef;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="550px" height="400px"></canvas>
<script src="main.js"></script>
</body>
</html>
js代码：
(function () {
var c = document.getElementById("myCanvas");
var con = c.getContext("2d");
c.onmousedown = function (e) {
c.onmousemove = function (e) {
con.beginPath();
con.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI);
con.fillStyle = "white";
con.fill();
con.closePath();
};
c.onmouseup = function (e) {
c.onmousemove = "";
}
}
})();