js 动态画直线

Hi3号

于 2019-04-18 17:57:21 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/BQL_Email/article/details/89384528

JS 专栏收录该内容

20 篇文章

订阅专栏

<!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" onclick="drawline($('#x').val(),$('#y').val())">划线</button>
</body>