(精华)2020年6月28日 Canvas 动态绘图
【摘要】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<me...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制矩形</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid red;">
<p>您的系统不支持此程序!</p>
</canvas>
<div id="allStyleBox">
<b>选形状：</b>
<select id="pickShape" tag="shape">
<option value="rect">画矩形</option>
<option value="arc">画圆</option>
<option value="line">画线</option>
<option value="clear">橡皮擦</option>
</select>
<b>选颜色</b>
<select id="pickColor" tag="color">
<option value="red">红色</option>
<option value="black">黑色</option>
</select>
<b>填充 还是 描边</b>
<select id="pickStroke" tag="strokeFill">
<option value="fill">填充</option>
<option value="stroke">描边</option>
</select>
<b>线宽</b>
<select id="pickLine" tag='line'>
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
<b>橡皮擦宽度</b>
<select id="pickClear" tag='clearWidth'>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var drawShapeObj = {
shape: pickShape.value,
color: pickColor.value,
line: pickLine.value,
strokeFill: pickStroke.value,
clearWidth: pickClear.value
};
var imageData = '';
function dragImg(fn) {
var moving = false; //标记是否在拖动
var dis = {};
canvas.onmousedown = function (e) {
moving = true;
dis = {
x: e.clientX,
y: e.clientY
}
}
canvas.onmousemove = function (e) {
if (!moving) {
return;
}
fn && fn.call(e, dis);
}
canvas.onmouseup = function (e) {
moving = false;
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData);
}
}
var shapeFun = {
common: function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//样式
ctx.beginPath();
ctx.lineWidth = drawShapeObj.line;
ctx.strokeStyle = drawShapeObj.color;
ctx.fillStyle = drawShapeObj.color;
shapeFun.reDrawAll();
},
reDrawAll: function () {
//绘制之前的形状
imageData && ctx.putImageData(imageData, 0, 0);
},
rect: function (dis) {
// console.log('rect');
//画一个矩形 this -- event
//思路一：只清除所绘制的那个区域
// ctx.clearRect(dis.x,dis.y,this.clientX-dis.x,this.clientY-dis.y); //清除所画区域
shapeFun.common();
ctx.rect(dis.x, dis.y, Math.abs(this.clientX - dis.x), Math.abs(this.clientY - dis.y)); //路径
ctx[drawShapeObj.strokeFill]();
ctx.closePath();
},
arc: function (dis) {
shapeFun.common();
var radius = Math.abs(this.clientX - dis.x);
ctx.moveTo(dis.x + radius, dis.y);
ctx.arc(dis.x, dis.y, radius, 0, 2 * Math.PI, true);
ctx[drawShapeObj.strokeFill]();
ctx.closePath();
},
line: function (dis) {
shapeFun.common();
ctx.moveTo(dis.x, dis.y);
ctx.lineTo(this.clientX, this.clientY);
ctx.stroke();
},
clear: function (dis) {
console.log('clear');
ctx.clearRect(this.clientX, this.clientY, drawShapeObj.clearWidth, drawShapeObj.clearWidth);
}
}
dragImg(shapeFun[drawShapeObj.shape]);
allStyleBox.addEventListener('change', function (ev) {
var target = ev.target,
tag = target.getAttribute('tag');
drawShapeObj[tag] = target.value;
dragImg(shapeFun[drawShapeObj.shape]);
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/106991664
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）