<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
canvas {
background: url("Office_CAD2.jpg");
}
</style>
</head>
<body>
<canvas id="gycanvas"></canvas>
<script>
//铺满屏幕
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
document.getElementById("gycanvas").setAttribute("width", width);
document.getElementById("gycanvas").setAttribute("height", height);
//初始化
var context = document.getElementById("gycanvas").getContext("2d");
var lastX=0;
var lastY=0;
//动态的画线
function drawline(x, y) {
console.log(x, y);
context.moveTo(lastX, lastY);
context.lineTo(x, y);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
lastX = x;
lastY = y;
}
</script>
坐标x<input type="text" id="x" />
坐标y<input type="text" id="y" />
<button id="btn" οnclick="drawline($('#x').val(),$('#y').val())">划线</button>
</body>
</html>
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
