VIP会员
购物车
私信
发表新帖
立即签到
关注
回复
支持(
反对(
首页上一页 1 下一页尾页 2 条记录 1/1页
ctx.save(),ctx.strokeStyle,ctx.restore()签名显示粉色？写在document.onmousemove = function(ev){...}外面签名就黑了
发表在HTML/CSS图书答疑
2018-10-09
是否精华
是
否
版块置顶:
是
否
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
#test {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("test");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
}
canvas.onmousedown = function(ev) {
ev = ev || window.event;
if (canvas.setCapture) {
canvas.setCapture();
}
ctx.beginPath();
ctx.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
document.onmousemove = function(ev) {
ctx.save();
ctx.strokeStyle = "pink";
ev = ev || event;
ctx.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
ctx.stroke();
ctx.restore();
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if (document.releaseCapture) {
document.releaseCapture();
}
}
return false;
}
}
</script>
</head>
<body>
<canvas id="test" width="300" height="300">
</canvas>
</body>
</html>
分享到：
