html5 一个页面两个画布,使用HTML5 canvas完成的一个网页白板

该代码能够使用canvas对象完成的一个基本功能。仅供大家参考。

Title

var ball;

var mouseX = 100;

var mouseY = 100;

var angle = 0;

var radius = 0;

var ballstyle = "."

var ballcolor = "#FF0000";

var allzindex = 0;

var cav_elem;

var cav_context;

//old positon

var opos;

function draw(){

ball = document.createElement("p");

ball.style.position = "absolute";

ball.style.color = ballcolor;

ball.style.zIndex = allzindex+1;

ball.innerHTML = ballstyle;

document.body.appendChild(ball);

document.all.selected = false;

ball.style["left"] = mouseX+ "px";

ball.style["top"] = mouseY+ "px";

}

function draw_cav(npos){

if(opos){

cav_context.beginPath();

// Start from the top-left point.

cav_context.moveTo(opos.x,opos.y);

cav_context.lineTo(npos.x,npos.y);

cav_context.stroke();

cav_context.closePath();

}

}

function MousePos(e){

eee = e || window.event;

var x,y;

if(!document.all){

x = e.pageX;

y = e.pageY;

}

else{

x = event.clientX + document.documentElement.scrollLeft;

y = event.clientY + document.documentElement.scrollTop;

}

return {x:x,y:y};

}

function setXY(e){

eee = e || window.event;

var pos = MousePos(e);

mouseX = pos.x;

mouseY = pos.y;

//if(e.button == 1){

draw_cav(pos);

//}

opos = pos;

}

window.onload = function(){

//get canvas and context

var elem = document.getElementById('myCanvas');

if (elem && elem.getContext) {

cav_elem = elem;

var context = elem.getContext('2d');

if (context) {

cav_context = context;

//cav_context.fillRect(0, 0, cav_elem.width, cav_elem.height);

}

}

//add mouse action

document.documentElement.onmousemove = function(e){

eee = e || window.event;

setXY(e);

};

}

Fallback content, in case the browser does not support Canvas.