php中js画图,JS实现简单的Canvas画图实例_javascript技巧

定义变量:[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");

函数部分:[javascript]

window.οnlοad=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();

}

window.οnlοad=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();

}

本文原创发布php中文网，转载请注明出处，感谢您的尊重！