html5之canvas的施用2
日期：2014-05-17 浏览次数：20559 次
html5之canvas的使用2
canvas 的使用：
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
