实现简单的Canvas画图_H5之家 - 中国HTML5教程资源分享第一站

文章详细内容

实现简单的Canvas画图

发布日期：2014年06月24日来源：PHP1.CN 点击：74

摘要：定义变量:[javascript]varstartX;varstartY;varendX;varendY;varradius;varcanvasdocument.getElementById("myCanvas");varcontextcanvas.getContext("2d"...

定义变量:

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

Demo

摘自简生的代码备忘录转载请注明来源：实现简单的Canvas画图

标签：PHP ,CSS数据库 ,优化