Define variables:
[javascript]
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");
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");
Function part:
[javascript]
window.onload=function() {
canvas.onmousedown = function(e) {
e = e || event;
startX = e.clientX ;
startY = e.clientY;
if(select[0].value == "arc") {
canvas.onmousemove = moveShowArc;
} else {
canvas.onmousemove = canvas. moveShowRect;
}
}
canvas.onmouseup = function() {
canvas.onmousemove = "";
}
}
function moveShowRect(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY;
context.beginPath();
context. rect(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();
}
window.onload=function() {
canvas.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() {
canvas.onmousemove = "";
}
}
function moveShowRect(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY;
context.beginPath();
context.rect(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();
}
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn