JS 제3자 도구 패키지 고전 사례 (canvas 동적 그림)
29765 단어 전단
<!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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.