JS는 간단한 캔버스 그리기 example_javascript 기술을 구현합니다.

변수 정의:
[javascript]

코드 복사 코드는 다음과 같습니다.

var startX;
var endX;
var radius;
var canvas = document.getElementById("myCanvas"); >var context = canvas.getContext("2d");
var select = document.getElementsByTagName("select");
var startX;
var startY;
var endX;
var endY;
var radius;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var select = document.getElementsByTagName("select) ");



기능 부분:

[javascript]

코드 복사 코드는 다음과 같습니다. window.onload=function() {

canvas.onmousedown = function(e) {

e = e || > startX = e.clientX ;
startY = e.clientY;
if(select[0].value == "arc") {
canvas.onmousemove = moveShowArc; 🎜> canvas.onmousemove = canvas.mouseShowRect;
}
}
canvas.onmouseup = function() {
canvas.onmousemove = ""
}
}
function moveShowRect(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY; ();
context.reg(startX, startY, endX, endY);
context.fillStyle = "#8ED6FF";
context.lineWidth = 3; 🎜> context.StrokeStyle = "검정색";
context.Stroke();
}
function moveShowArc(e) {
context.clearRect(0, 0, 500, 300); > endX = e.clientX - startX ;
endY = e.clientY - startY;
radius = Math.sqrt(Math.pow(endX,2) Math.pow(endY,2)); context.beginPath();
context.arc(startX, startY,radius,0,2 * Math.PI,false)
context.fillStyle = "#8ED6FF"
context.fill() ;
context.lineWidth = 3;
context.StrokeStyle = "black";
context.Stroke()
}
window.onload=function() {
캔버스. onmousedown = function(e) {
e = e || event;
startX = e.clientX;
startY = e.clientY;
if(select[0].value == "arc ") {
canvas.onmousemove = moveShowArc;
} else {
canvas.onmousemove = moveShowRect;
}
}
canvas.onmouseup = function() {
캔버스 .onmousemove = "";
}
}
function moveShowRect(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY;
context.beginPath();
context.ect(startX, startY, endX, endY);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 3;
context.StrokeStyle = "black";
context.Stroke();
}
function moveShowArc(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY;
radius = Math.sqrt(Math.pow( endX,2) Math.pow( endY,2));
context.beginPath();
context.arc(startX, startY,radius,0,2 * Math.PI,false);
context.fillStyle = "#8ED6FF" ;
context.fill();
context.lineWidth = 3;
context.StrokeStyle = "black";
context.Stroke();
}