定义变量:

[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.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();

}

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();

}

【JS实现简单的Canvas画图实例】相关文章：

★ jQuery实现div随意拖动的实例代码(通用代码)

★ JavaScript实现的MD5算法完整实例

★ JavaScript实现将UPC转换成ISBN的方法

★ 用JavaScript实现对话框的教程

★ javascript实现简单的进度条

★ js+html5实现canvas绘制镂空字体文本的方法

★ JQuery实现带排序功能的权限选择实例

★ js实现简单div拖拽功能实例

★ Javascript进制转换实例

★ JavaScript实现广告的关闭与显示效果实例