[html5之canvas.docVIP

HTML5之canvas Canvas是html5中的新标签，用它来定义图形，完成页面的矢量图形！它自己基本上没有什么行为，而是把API交给了javascript！ 如何使用canvas来画图？ Canvas是一块画布，完成画图的是脚本！所以在javascript中实现canvas的API一般需要以下几步： 获取画布上下文环境，既常见的各种context代码如下下： var ctx = document.getElementById(canvas).getContext(2d); 定义路径，因为canvas的路径是有几个函数来确定的，所以，必须调用函数，getContext、act...... 开始画图：画图的思路和java等GUI程序的思路一样！ 基本步骤基本上就这么点，下面是用canvas画的骰子！实践出真知！ html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleThrowing a die/title script var cwidth = 400;//画布宽度 var cheight = 300;//画布长度 var dicex = 50;//骰子顶点X坐标 var dicey = 50;//骰子顶点Y坐标 var dicewidth = 100;//骰子宽度 var diceheight = 100;//骰子长度 var dotrad = 6;//骰子半径 var ctx;//画图上下文环境context /* 初始化 */ function init(){ var ch = 1 + Math.floor(Math.random()*6); drawface(ch); } /* 画出骰子轮廓 */ function drawface(n){ ctx = document.getElementById(canvas).getContext(2d);//得到context ctx.linewidth = 5;//线条宽度 ctx.clearRect(dicex, dicey, dicewidth, diceheight);//先清除原来的图像 ctx.strokeRect(dicex, dicey, dicewidth, diceheight);//画一空心矩形 ctx.fillStyle = #009966;//设置骰子颜色 switch(n){ case 1: Draw1(); break; case 2: Draw2(); break; case 3: Draw2(); Draw1(); break; case 4: Draw4(); break; case 5: Draw4(); Draw1(); break; case 6: Draw4(); Draw2mid(); break; } } /* 画出中间的一点 */ function Draw1(){ var dotx; var doty; ctx.beginPath();//打开路径 dotx = dicex + .5*dicewidth; doty = dicey + .5*diceheight; ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true); ctx.closePath();//关闭路径 ctx.fill();//填充所构造出来的图画 } /* 画出对角线的两点 */ function Draw2(){ var dotx; var doty; ctx.beginPath(); dotx = dicex + 3*dotrad; doty = dicey + 3*dotrad; ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true); dotx = dicex + dicewidth - 3*dotrad; doty = dicey + diceheight - 3*dotrad; ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } /* 画出四个顶点 */ function Draw4(){ var dotx; var doty; ctx.beginPath(); dotx = dicex + 3*dotrad; doty = dicey + 3*dotrad; ctx.ar