html5之canvas的使用2
canvas 的使用：
<!DOCTYPE html><html><head><script type="text/javascript">function initialCanvas(){var canvas=document.getElementById('myCanvas');var context=canvas.getContext('2d');canvas.addEventListener("click",getCursorPosition,false);drawGrid(context);}function drawCircle(x,y,context){context.beginPath(); context.arc(x,y,12.5,0,Math.PI*2,true);//前两个为，圆心座标（x,y）；第三四个为半径，？；第五个：为圆周率，context.closePath();context.strokeStyle="#000";//颜色方案context.stroke();//正式绘制}function drawGrid(context){context.beginPath(); context.arc(12.5,12.5,12.5,0,Math.PI*2,true);//前两个为，圆心座标（x,y）；第三四个为半径，？；第五个：为圆周率， for(var x = 0;x<=1000;x+=25){//边框横线context.moveTo(x,1); //起点？context.lineTo(x,1000);//终点？}for(var y = 0;y<=1000;y+=25){//边框坚线context.moveTo(1,y); //起点？context.lineTo(1000,y);//终点？}context.closePath();context.strokeStyle="#EE0000";//颜色方案context.stroke();//正式绘制}function getCursorPosition(e){var canvas=document.getElementById('myCanvas');var context=canvas.getContext('2d');var i,k;//小圆的圆心位置（）var x,y,x1,y1;if(e.pageX || e.pageY){x = e.pageX;y = e.pageY;i=parseInt((x+24)/25);k=parseInt((y+24)/25);x1 = (i-1)*25+12.5;y1 = (k-1)*25+12.5;drawCircle(x1,y1,context);}else{x= e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y= e.clientY+document.body.scrollTop+document.documentElement.scrollTop;alert("else:"+x+" "+y);}}</script></head><body><table><tr><td><canvas id="myCanvas" width="1000" height="1000">Your browser does not support the canvas tag.</canvas></td></tr><tr><td><input type="button" onclick="initialCanvas()" value="drawLine"/></td></tr></table></body></html>